An interactive MudBlazor component playground for exploring components, testing variations, and supporting Figma design system development.
This is an unofficial community project and is not affiliated with the MudBlazor team.
MudBlazor Component Playground provides a visual environment for exploring MudBlazor components and their available options.
Each component page includes:
- A live component preview
- Interactive controls for component properties
- Variants, colors, sizes, icons, states, and layout options
- Immediate visual feedback
- Component-specific examples and descriptions
Users can combine options like building blocks and see the resulting component without repeatedly editing Razor code.
- Select a MudBlazor component from the navigation menu.
- Adjust its available properties, variants, states, and layout options.
- View the updated result instantly in the live preview.
The preview responds immediately as the selected options change, making it easier to understand how each component behaves.
- Interactive MudBlazor component previews
- Component-specific configuration controls
- Live visual updates
- Light and dark theme support
- Responsive layouts
- Organized component navigation
- Blazor WebAssembly architecture
- Docker support
- Figma design system development workflow
This playground is developed alongside the MudBlazor UI Kit: Design System for Blazor, created and maintained by the same author for designers and developers building Blazor applications with MudBlazor.
The UI kit closely follows MudBlazor’s component naming, structure, variants, and design principles, helping maintain consistency between Figma designs and MudBlazor implementations.
The playground is currently organized into the following component categories:
| Category | Components |
|---|---|
| Buttons | Button, Floating Action Button (FAB), Button Group, Icon Button, Scroll to Top, Toggle Icon Button |
| Charts | Interactive chart demonstrations |
| Data Display | Avatar, Card, Carousel, Chat, Chips, Chip Set, Expansion Panels, List, Pagination, Simple Table, Stepper, Table, Inline Edit Table, Tabs, Timeline, Tooltip, Tree View, Typography |
| Feedback | Alert, Badge, Dialog, Overlay, Progress, Skeleton, Snackbar |
| Inputs | Checkbox, Color Picker, Date Picker, Date Range Picker, File Upload, Form, Numeric Field, Radio, Rating, Select, Slider, Switch, Text Field, Time Picker, Toggle Group |
| Layout | App Bar, Divider, Drawer, Paper, Spacer, Toolbar |
| Navigation | Breadcrumbs, Link, Menu, Nav Menu |
Additional components, properties, states, and variations will be added progressively.
- .NET 10 SDK
- A modern web browser
- Git
git clone https://github.com/m1n3g/mudblazor-component-playground.git
cd mudblazor-component-playground
dotnet runOpen the local address shown in the terminal.
A production Docker configuration is included in the repository.
Build and run the application with Docker Compose:
docker compose up --buildDevelopment-specific Docker configuration can be kept locally and excluded from Git.
MudBlazor is developed and maintained by the MudBlazor team. This unofficial community project is not affiliated with, sponsored by, or endorsed by the official MudBlazor project.