Static WebAssembly demo on GitHub Pages. Everything runs in your browser; server-only features use labeled stand-ins. Run locally for the full Blazor Server experience.

Component gallery

Every MudBlazor component, working

84 components, each with live examples you can read beside their source, the parameter combinations side by side, and playgrounds that write the markup for you.

Find a component

84 components

01Actions

  1. Button Buttons start an action. Choose the variant by emphasis: one filled button per view, outlined for secondary actions, text for the rest. MudButton
  2. Button group A button group joins related actions into one connected control and styles them together. Choose it for a small set of peer actions, such as pagination or alignment, and for split buttons that pair a default action with alternatives. MudButtonGroup · MudButton · MudIconButton · MudMenu
  3. Chip and chip set Chips are compact elements for tags, attributes, filters and choices. A chip set groups them and manages selection and closing. Choose chips for short, scannable values; use a toggle group for a fixed set of mutually exclusive options. MudChip · MudChipSet
  4. Floating action button and FAB menu A floating action button (FAB) carries the single most important action of a screen; a FAB menu fans out a few related actions from it. Use at most one per view, and prefer an ordinary button when the action is not the obvious next step. MudFab · MudFabMenu · MudFabMenuItem
  5. Hotkey MudHotkey listens for a key combination anywhere on the page while it is rendered, then raises an event or reveals its content. Use it for shortcuts to actions that also exist as visible controls; never make a hotkey the only way to do something. MudHotkey
  6. Icon button and toggle icon button An icon button is a compact action for toolbars, rows and cards; a toggle icon button switches between two states such as favourite or muted. Choose them when the icon is unambiguous, and always give them an accessible name. MudIconButton · MudToggleIconButton
  7. Link A link navigates to another page or resource and takes the theme's typography and colors. Choose a link when the result is a new location; when the result is an action on this page, use a button. MudLink
  8. Menu A menu shows a temporary list of actions or destinations from a button, an icon or any custom activator. Choose a menu when several related actions would crowd the screen; keep the most frequent action visible as a button. MudMenu · MudMenuItem
  9. Toggle group A toggle group is a row of connected buttons where one or several stay selected. Choose it for a small, always-visible set of options such as a view mode or filters; use a select when the options are many or rarely changed. MudToggleGroup · MudToggleItem

02Inputs and forms

  1. Autocomplete A text field that searches as you type and offers matching options. Use it for long lists such as places, products or people, and when results come from a slow source that must be searched rather than loaded whole. MudAutocomplete
  2. Check box A box that turns an option on or off, alone or as one of several independent choices. Use check boxes for choices confirmed with a button, and a switch for settings that apply at once. MudCheckBox
  3. Field The frame of an input (label, outline, adornments, helper and error text) around any content. Use it to display read-only values in a form's style, or to give a custom control the same look as the inputs beside it. MudField
  4. Form and validation MudForm validates MudBlazor inputs with functions and attributes; EditForm validates a model with data annotations. Use MudForm for quick forms without a model class, and EditForm when the model already carries its rules. MudForm · EditForm · DataAnnotationsValidator
  5. Mask Masks shape text while it is typed: delimiters appear on their own and characters that do not fit are refused. Use them for values with a fixed structure such as phone numbers, card numbers, dates and account codes. MudTextField · MudMask · PatternMask · DateMask · RegexMask · MultiMask · BlockMask
  6. Numeric field A text field bound to a number, with bounds, steps, spin buttons and culture-aware formatting. Use it for quantities and measurements people type; use a slider when the rough position matters more than the exact value. MudNumericField
  7. Radio A group of mutually exclusive options, all visible at once. Use radios when there are two to five options and comparing them matters; use a select for longer lists. MudRadioGroup · MudRadio
  8. Rating A row of icons for giving or showing a score, usually out of five. Use it for quick opinions and for displaying averages; ask for written feedback separately when the reason matters. MudRating
  9. Select A field that opens a list of known options, for one choice or several. Choose it over radios when there are more than five or six options or space is tight; switch to an autocomplete when the list is long enough to need searching. MudSelect · MudSelectItem
  10. Slider A thumb on a track for choosing a value within a range. Use it when the position matters more than the exact number, such as volume or brightness, and pair it with a numeric field when exactness matters too. MudSlider
  11. Switch A toggle for a setting that takes effect immediately, like a light switch. Use it in settings lists; use a check box when the choice is confirmed later with a button. MudSwitch
  12. Text field A labeled single- or multi-line text input with helper text, adornments, counters and validation. Use it whenever people type free text; switch to a select or autocomplete when the answer comes from a known list. MudTextField

03Pickers and uploads

  1. Color picker A field that opens a spectrum, a grid or a palette of colors and returns a MudColor. Choose it for themes, labels and drawing tools; offer a short palette when only a few colors make sense. MudColorPicker · MudColor
  2. Date picker A text field that opens a calendar. Choose it when people pick one day and benefit from seeing the week around it; for dates they know by heart, such as a birthday, allow typing too. MudDatePicker · DateMask
  3. Date range picker Two dates chosen in one calendar: a start and an end. Choose it for stays, reports and leave requests, where the span matters as much as either date. MudDateRangePicker · DateRange
  4. File upload A file picker with any activator you like: a button, an icon or a drop zone. It hands you IBrowserFile objects; where the bytes go next is your decision, and in this gallery they never leave the app. MudFileUpload · IBrowserFile
  5. Time picker A text field that opens a clock face. Choose it for a time of day, such as an appointment or a shift; for durations, use a numeric field instead. MudTimePicker

04Data display

  1. Avatar and avatar group MudAvatar represents a person or an entity with a picture, initials or an icon. MudAvatarGroup stacks several and summarizes the overflow, for crews, reviewers and participants. MudAvatar · MudAvatarGroup
  2. Badge MudBadge pins a count, a short label, a dot or an icon to the corner of another element. Use it for unread counts and small status markers, and give it an accessible label. MudBadge
  3. Card MudCard groups content and actions about a single subject: a product, an article, a person. Compose it from a header, media, content and actions, and keep each card about one thing. MudCard · MudCardHeader · MudCardMedia · MudCardContent · MudCardActions
  4. Carousel Slides shown one at a time with arrows, bullets, swipe and optional auto-cycling. Use it for a handful of related highlights; anything people must read or compare belongs on the page instead, where nothing moves away. MudCarousel · MudCarouselItem
  5. Data grid A column-driven grid: declare each column once and the grid sorts, filters, groups, aggregates, edits, resizes and virtualizes for you. Choose it over the table when people need to explore data, not just read it. MudDataGrid · PropertyColumn · TemplateColumn · HierarchyColumn · SelectColumn · MudDataGridPager
  6. Divider MudDivider draws a thin rule between groups of content, horizontally or vertically. Use it when spacing alone does not separate the groups clearly. MudDivider
  7. Expansion panels MudExpansionPanels stack sections that open and close in place. Use them to let readers skim headings and expand only what they need, such as FAQs, settings groups and long forms. MudExpansionPanels · MudExpansionPanel
  8. Highlighter MudHighlighter wraps the parts of a text that match a search in mark elements. Use it to show why a result matched, in search results, filters and long passages. MudHighlighter
  9. Icons MudIcon draws an SVG icon from the bundled Material sets or from your own path data. Use it beside text to aid scanning; an icon that stands alone needs an accessible name. MudIcon · Icons
  10. Image MudImage renders an img with theme-aware elevation, fluid sizing and object-fit control. Use it for photographs and illustrations; every image needs alt text, or an empty alt when it is decorative. MudImage
  11. List A vertical list of items with icons, avatars, secondary text and nested sub-lists. Use it for menus, settings and anything people pick from; choose a table when items have several comparable fields. MudList · MudListItem · MudListSubheader · MudVirtualize
  12. Paper MudPaper is the plain surface that cards, menus and dialogs are made of. Use it directly when you need a panel with a background, a border or a shadow and no further structure. MudPaper
  13. Simple table MudSimpleTable styles plain HTML table markup: you write thead, tbody and tfoot yourself. Choose it for static, read-only data such as timetables and specifications, where sorting and paging would only add weight. MudSimpleTable
  14. Table A row-and-column table with sorting, paging, selection, grouping and inline editing that you lay out cell by cell. Choose it when you want full control over the markup of each row; choose the data grid when columns should be declared once and configured by the user. MudTable · MudTh · MudTd · MudTableSortLabel · MudTablePager
  15. Timeline Events placed along a line in order, each with a dot, its content and optional opposite text such as a date. Use it for histories, release notes and progress logs where sequence is the point. MudTimeline · MudTimelineItem
  16. Tree view A hierarchy people can expand, collapse and select from: folders, categories, organisation charts. Choose it when depth matters; for one level of grouping a nested list is lighter. MudTreeView · MudTreeViewItem · TreeItemData
  17. Typography MudText applies the theme's type scale to any text. Choose the Typo for how text should look and HtmlTag for what it means, so the outline stays correct. MudText

05Charts

  1. Bar chart Bars compare amounts across categories, side by side or stacked into a total. Choose grouped bars to compare series and stacked bars when the total matters. MudChart draws vertical bars only. MudChart · ChartSeries · BarChartOptions · StackedBarChartOptions
  2. Heat map A grid of cells shaded by value, for patterns across two categories such as day and hour. Choose it when the shape of the pattern matters more than exact values; turn labels on when they do. MudChart · MudHeatMapCell · HeatMapChartOptions
  3. Line chart Lines show how values change across ordered categories such as months. Choose a line when the trend matters more than any single value; for real timestamps, use a time series. MudChart · ChartSeries · LineChartOptions · SeriesDisplayOverride
  4. Pie, donut and rose Radial charts show how parts make up a whole. Use them for a handful of slices whose shares differ clearly; with many or similar slices, a bar chart is easier to read. MudChart · PieChartOptions · DonutChartOptions · RoseChartOptions
  5. Radar chart A radar chart plots several measures on spokes around a centre, so each series becomes a shape. Choose it to compare profiles on the same scale; keep to a few series and five to eight spokes. MudChart · RadarChartOptions
  6. Sankey diagram A flow diagram: nodes are stages and the width of each link is the amount that moves between them. Choose it to show where a quantity comes from and where it ends up. MudChart · SankeyEdge · SankeyNode · SankeyChartOptions
  7. Scatter plot Each point is one observation placed by two measurements, which reveals correlation, clusters and outliers. Choose it when both axes are numbers; keep to two or three series so the colors stay distinct. MudChart · ScatterPlotChartOptions · ScatterSeriesDisplayOverride
  8. Time series A line chart whose x-axis is real time. Points carry their own timestamps, so series sampled at different rates or with gaps line up correctly. Choose it for sensor readings and logs. MudChart · TimeValue · TimeSeriesChartOptions

06Feedback and overlays

  1. Alert Alerts put a short, important message inline with the content it concerns. Choose one when the message must stay visible; use a snackbar for transient confirmations. MudAlert
  2. Collapse Collapse animates a block of content open and closed. It is the bare mechanism behind expansion panels: use it when you design the trigger yourself. MudCollapse
  3. Dialog Dialogs interrupt the page for a decision or a short task that must finish before the user continues. Show them through IDialogService, or inline with a bound Visible. MudDialog · IDialogService · DialogOptions · IMudDialogInstance
  4. Exit prompt An exit prompt asks for confirmation before the user leaves a page with unsaved work. Enable it only while there is something to lose. MudExitPrompt
  5. Focus trap A focus trap keeps Tab and Shift+Tab inside a region, as dialogs do. Use it for custom modal panels, and always give people a visible way out. MudFocusTrap
  6. Message box A message box asks one question and returns the answer: true for yes, false for no, null for cancel. Use it instead of writing a dialog component when the content is a sentence and two or three buttons. MudMessageBox · IDialogService · MessageBoxOptions
  7. Overlay An overlay covers the page, or one container, to block interaction and focus attention: behind a loading indicator, a custom panel or a spotlight message. MudOverlay
  8. Popover A popover floats content next to the element that contains it. It is the building block behind menus, selects and tooltips; reach for it directly when you need a custom floating panel. MudPopover · MudPopoverProvider
  9. Progress Progress indicators show that work is happening: determinate when you know how much is done, indeterminate when you do not. Circular suits buttons and small areas; linear suits pages, cards and uploads. MudProgressCircular · MudProgressLinear
  10. Scroll to top A button that appears after the reader scrolls down and takes them back to the top. Use it on long pages or long scrollable panels; without Selector it follows the window. MudScrollToTop
  11. Skeleton Skeletons hold the shape of content that is still loading, so the layout does not jump when it arrives. Use them for the first load of cards, lists and tables; use a progress indicator for actions. MudSkeleton
  12. Snackbar Snackbars confirm what just happened with a brief message at the edge of the screen, optionally with one action such as Undo. Choose them for transient news; use an alert for messages that must stay. ISnackbar · MudSnackbarProvider · SnackbarOptions
  13. Tooltip Tooltips name or briefly explain a control on hover and keyboard focus. Use them for supplementary hints; never hide information a user needs to complete a task inside one. MudTooltip

07Navigation

  1. App bar The bar at the top (or bottom) of an application that carries its title, navigation toggle and global actions. Use one per layout; page-level actions belong in a toolbar. MudAppBar · MudContextualActionBar
  2. Breadcrumbs A trail of links from the top of a hierarchy to the current page. Use breadcrumbs where pages nest several levels deep and readers arrive from search. MudBreadcrumbs · BreadcrumbItem
  3. Drawer A side panel for navigation or secondary content. Choose the variant by how much room you have: persistent and mini push the content aside, temporary floats above it, responsive switches between the two at a breakpoint. MudDrawer · MudDrawerContainer · MudDrawerHeader · MudLayout
  4. Nav menu A vertical list of navigation links with optional collapsible groups, usually placed in a drawer. Links highlight themselves when their address matches the current page. MudNavMenu · MudNavLink · MudNavGroup
  5. Page content navigation MudPageContentNavigation lists the sections of a long page and highlights the one in view as the reader scrolls. Use it for documentation and long forms; register each section once it has rendered. MudPageContentNavigation · MudPageContentSection
  6. Pagination Page buttons for moving through a long, ordered list one page at a time. Choose it when readers need to jump to or return to a specific page; prefer infinite scrolling for casual browsing. MudPagination
  7. Stepper Leads the reader through a task split into ordered steps, showing where they are and what remains. Use it for multi-part forms such as bookings and checkouts. MudStepper · MudStep
  8. Tabs Tabs switch between related views of the same subject without leaving the page. Use them for a handful of peer sections; use a stepper when the order matters. MudTabs · MudTabPanel · MudDynamicTabs
  9. Toolbar A horizontal row of actions and controls for the content beside it, such as an editor or a table. Use a toolbar for page-level actions and keep the app bar for the application. MudToolBar

08Layout and structure

  1. Container Centers content horizontally and caps its width. Use it for the main column of a page so lines stay readable on wide screens. MudContainer
  2. Drop zone Drag and drop between named zones. A MudDropContainer owns the items and decides which zone shows each one; MudDropZone marks the places they can go. Pair every drag with a keyboard alternative. MudDropContainer · MudDropZone · MudDragHandle
  3. Element Renders any HTML tag chosen at run time, with attributes, classes and content passed through. Use it when the right tag depends on data, such as a heading level or a link that is sometimes a span. MudElement
  4. Grid A twelve-column responsive grid. Choose it when items should line up in columns whose widths change with the screen size; for a single row or column of items, a stack is simpler. MudGrid · MudItem
  5. Hidden and breakpoints MudHidden renders its content only at chosen screen sizes, and MudBreakpointProvider shares one breakpoint listener with everything inside it. Use them when content must change, not just rearrange, between phone and desktop. MudHidden · MudBreakpointProvider
  6. Spacer and flex break Two tiny flex helpers. MudSpacer grows to push its neighbours apart; MudFlexBreak forces the items after it onto a new line of a wrapping flex container. MudSpacer · MudFlexBreak
  7. Split panel Two panels with a draggable divider between them, so readers choose how much room each side gets. Use it for list and detail, editor and preview, or code and output. MudSplitPanel
  8. Stack A flex container that lines its children up in a row or a column with even spacing. Reach for it first for small layouts: form rows, button groups, card bodies. MudStack
  9. Swipe area A region that reports swipe gestures from touch, pen or mouse: the direction and the distance travelled. Use it for gesture shortcuts, and always offer a button for the same action. MudSwipeArea

09Theming and globalization

  1. Right-to-left MudRTLProvider sets dir="rtl" on its content and cascades RightToLeft to every MudBlazor component inside, which mirrors layout, icons and spacing for Arabic, Hebrew, Persian and Urdu. MudRTLProvider
  2. Theme MudThemeProvider turns a MudTheme into CSS variables that every component reads: palette, typography, shape and shadows. Change the theme once instead of styling components one by one. MudThemeProvider · MudTheme · PaletteLight · PaletteDark · Typography · LayoutProperties

Starting .NET in your browser…