Marilo

Provider-first Blazor component library. Components define behavior — providers supply visual styling.
Swap providers to change the entire look-and-feel without touching a single component.

📖 Documentation · 🚀 Live Demo · 🐛 Report a Bug · 💡 Request a Feature

---

Overview

Marilo is an enterprise-grade Blazor component library built around a provider pattern: components are decoupled from their visual implementation. Register a provider (e.g., Fluent UI) at startup and all components automatically adopt that style system — without any per-component changes. This makes Marilo ideal for design system migrations, white-label products, and teams that need UI consistency across multiple applications.

🧩 40+ components · 5,000+ Tabler Icons (MIT) · Provider-swappable styling · .NET 10 · Unlicense

---

Table of Contents

• Packages
• Getting Started
• Usage
• Component Catalog
• Theming & Providers
• Icons
• Running the Demo
• Documentation
• Contributing
• License

---

Packages

Package	Description	NuGet
Marilo.Components	40+ provider-agnostic Razor components	(coming soon)
Marilo.Providers.FluentUI	Fluent UI visual styling provider	(coming soon)
Marilo.Icons.Tabler	5,000+ Tabler Icons SVG sprite provider (MIT)	(coming soon)
Marilo.Icons	Legacy custom SVG icon set (360 icons)	(coming soon)
Marilo.Core	Base classes, contracts, and enums	(coming soon)

---

Getting Started

Prerequisites

• .NET 10 SDK or later
• A Blazor Server or Blazor WebAssembly project

Installation

dotnet add package Marilo.Components
dotnet add package Marilo.Providers.FluentUI
dotnet add package Marilo.Icons.Tabler   # recommended — 5,000+ Tabler Icons (MIT)

---

Usage

1. Register services

In Program.cs, register Marilo and choose your provider:

builder.Services.AddMarilo(options => options.UseFluentUI());
builder.Services.AddMariloIconsTabler();  // Tabler Icons (recommended)

2. Add stylesheets

In your App.razor or index.html:

<link rel="stylesheet" href="_content/Marilo.Providers.FluentUI/css/marilo-fluentui.css" />
<link rel="stylesheet" href="_content/Marilo.Icons/css/marilo-icons.css" />

3. Add global imports

In _Imports.razor:

@using Marilo.Components
@using Marilo.Core.Enums

4. Use a component

<MariloButton Variant="ButtonVariant.Primary" OnClick="HandleClick">
    <MariloIcon Name="download" /> Export
</MariloButton>

🔗 Full usage guide →

---

Component Catalog

Explore all components with live demos and API reference in the documentation →

Category	Components
Buttons	MariloButton, MariloButtonGroup, MariloToggleButton, MariloFAB
Forms	MariloTextField, MariloTextArea, MariloCheckbox, MariloSwitch, MariloSelect, MariloSlider, MariloDatePicker, MariloColorPicker, MariloSearchBox, MariloRating
Navigation	MariloMenu, MariloTabs, MariloBreadcrumb, MariloTreeView, MariloStepper, MariloSegmentedControl, MariloPagination, MariloToolbar
Layout	MariloContainer, MariloStack, MariloGridLayout, MariloPanel, MariloCard, MariloDivider
Feedback	MariloAlert, MariloDialog, MariloConfirmDialog, MariloDrawer, MariloTooltip, MariloChip, MariloProgressBar, MariloSpinner, MariloSkeleton
Display	MariloAvatar, MariloBadge, MariloDataGrid, MariloList
Icons	MariloIcon, MariloIconSprite

---

Theming & Providers

Marilo's provider architecture separates component behavior from visual implementation. A provider is registered once at app startup and supplies all CSS, tokens, and rendering overrides across every component.

Currently available providers:

• Marilo.Providers.FluentUI — Microsoft Fluent UI 2 design language

Additional providers (e.g., Material, Bootstrap) can be created by implementing IMariloProvider. Swapping providers requires changing a single line in Program.cs — no component code changes needed.

🎨 Theming guide →

---

Icons

Marilo uses Tabler Icons (MIT) as its default icon set — 5,000+ outline SVG icons accessible via the MariloIcon component.

<!-- Basic usage -->
<MariloIcon Name="settings" />

<!-- With size and color -->
<MariloIcon Name="star" Size="IconSize.Large" ThemeColor="IconThemeColor.Primary" />

Icon Registration Options

Method	Package	Description
AddMariloIconsTabler()	Marilo.Icons.Tabler	Recommended. 5,000+ Tabler Icons (MIT).
AddMariloIcons()	Marilo.Icons	Legacy custom icon set (360 icons).
AddMariloIconsCustom(opts => ...)	Marilo.Icons	BYO sprite or CSS-class icon library.

Icon names use Tabler kebab-case (e.g., home, calendar-event, user). Browse the full icon reference at tabler.io/icons.

🔍 Browse all icons →

---

Running the Demo

The demo is a Blazor Server application showcasing all components interactively.

Quickest way — GitHub Codespaces (no local setup)

Once the Codespace starts, run:

dotnet run --project samples/Marilo.Demo

Then open the forwarded port in your browser.

Run locally

git clone https://github.com/ctwoodwa/marilo.git
cd marilo
npm install && npm run build
dotnet run --project samples/Marilo.Demo

Open https://localhost:5301.

---

Documentation

Full API reference, component demos, theming guide, and icon browser are published to GitHub Pages:

📖 https://ctwoodwa.github.io/marilo/

To build and serve docs locally:

npm run docs:serve

Docs are generated using DocFX from the docfx/ directory.

---

Contributing

Contributions are welcome from the community. Please read the guidelines before opening a PR.

1. Fork the repo and create your branch: git checkout -b feat/my-component
2. Install dependencies: npm install
3. Build assets: npm run build
4. Run the demo: dotnet run --project samples/Marilo.Demo
5. Submit a PR against main

📋 Contributing Guide →
💬 Code of Conduct →
🔒 Security Policy →

---

Versioning

This project follows Semantic Versioning.

• 🔖 Releases →
• 🛣️ Roadmap →

---

License

Licensed under The Unlicense.

© 2026 Christopher Wood. All rights reserved.

---

_{Built with ❤️ using Blazor · ctwoodwa.github.io/marilo}