Actions
Buttons, menus and controls that trigger something.
- ButtonMudButtonA daisyUI btn with typed Color, Variant and Size. Renders a link when Href is set, shows a spinner while Loading, and drops in for MudButton.
Release 2.4.0
Acme Cloud · Production
IconButtonMudIconButtonA round ghost btn holding a single icon, for toolbars and compact controls. Color tints the icon, Href turns it into a link; always give it an aria-label.- ButtonGroupMudButtonGroupA daisyUI join that fuses adjacent buttons into one segmented bar. Each child keeps its own Color, Variant and Size; add join-vertical to stack them.
Q3 roadmap
FabMudFabA floating action button pinned to the bottom-right corner that opens a speed dial of FabAction buttons on focus, in a stack or a Flower arc. Pure CSS, no JavaScript.Sort customers
DropdownA CSS-only menu built on details/summary: the Activator opens a panel of menu items below it. Use Placement, Hover or Open to control it; for click-to-close menus with Blazor state, reach for Menu.Tap to deploy
SwapToggles between two pieces of content, On and Off, with an optional rotate or flip animation. Bind Active for two-way state.Choose a theme
ThemeControllerA checkbox or radio input that switches the daisyUI theme of the whole page through CSS alone. Value names the theme; radios sharing a Name pick one of many.- ToggleGroupA segmented control: a join of ToggleItem buttons where one value is selected at a time. Generic over T and bound with @bind-Value.
Data display
Cards, badges, tables, lists and other ways to show content.
+4Platform team
7 members · shipping the billing revamp
ASTBPNAvatarMudAvatarA round daisyUI avatar for people and things. Shows an image when Image is set, otherwise a coloured placeholder with initials or an icon; drops in for MudAvatar.- 824New Pro plan Beta v2.4BadgeMudBadgeA small count or label. By default it overlays its child as a daisyUI indicator (numbers above Max show as "99+"); set Inline for a plain badge in the text flow.
NewSpring campaign visual
Brand assets · uploaded by Ana
PNG · 2.4 MBCardMudCardA daisyUI card surface that groups a header, body and actions. Outlined swaps the shadow for a border, Elevation sets the depth, and OnClick makes the whole card keyboard-accessible.
Release highlights swipe →CarouselA CSS scroll-snap carousel: CarouselItems scroll sideways (or up and down with Vertical) and snap into place, with no JavaScript.- MCMeiIs staging green?OHOmarAll checks passed.MCShip it at nine?OHI'll watch the logs.ChatBubbleOne message in a daisyUI chat thread. Placement puts it on the start or end side; Image, Header and Footer add an avatar, sender line and delivery status.
- Billing API Mobile Enterprise Docs Production Security Onboarding Q3ChipMudChipA compact label built on daisyUI's badge, with Color, Variant, Size and a leading Icon. Becomes a button with OnClick and gets a close button with OnClose; replaces MudChip.
- Maintenance inProduction deploy · Friday7 hours42 min16 secCountdownAn animated two-digit counter cell (0–99) using daisyUI's countdown. Combine cells for clocks; Countdown.Digits splits seconds into hours, minutes and seconds.
- After Dashboard
v2Before Dashboard
v1DiffA before/after comparison with a draggable divider, built on daisyUI's diff. Item1 and Item2 take any content; AspectClass sets the frame ratio. - ⌘ + K▲◀ ▼ ▶
Press Space to preview a file
KbdA keyboard key cap for shortcuts and instructions, with three sizes. Use it inline in text or combine keys for chords. - Sprint 14 4 tasks
- 01 Add SSO to the admin app 5d
- 02 Fix invoice rounding 1d
- 03 Export users to CSV 2d
- 04 Upgrade to .NET 10 3d
ListMudListA vertical daisyUI list of rows. ListRow offers a ready Icon/Title/Subtitle layout or free columns; ListItem keeps MudListItem's Icon, Text, Href and OnClick.- Uptime99.98%Last 90 daysActive users1.2M↗︎ 18% this quarterStatsA row (or column) of headline numbers using daisyUI stats. Each Stat has a Title, Value and Desc, plus optional Figure and Actions slots.
- Incident openAPI operationalSearch degradedLegacy export offlineStatusA tiny status dot for online, busy or offline states, in five sizes. Animated adds a ping ring; set AriaLabel when the dot stands alone.
- Top customers Week 12
# Customer Trend 1 Northwind Traders Up 2 Contoso Down 3 Fabrikam Up 4 Globex Up 5 Umbrella Corp Down TableMudTableA typed data table: give it Items, a HeaderContent of Th cells and a RowTemplate of Td cells. Adds striping, dense rows, row clicks and client-side paging with TablePager; replaces MudTable. - Invoices
Due Customer 04 Mar Northwind Traders Overdue 07 Mar Contoso Due soon 10 Mar Fabrikam Paid 13 Mar Globex Paid SimpleTableMudSimpleTableA daisyUI table around markup you write yourself. Use it for static or hand-built tables; reach for Table when rows come from a collection. - 2022
Public launch
- 2024
10,000 customers
- 2026
SOC 2 certified
TimelineA vertical daisyUI timeline of events. Each TimelineItem has a coloured dot or an Icon, a boxed main content and an optional ItemOpposite.Release notes · v2.4
Audit log for every workspace
See who changed what, and when, across all your projects.
Acme Cloud · Pro and Enterprise plans
TypographyMudTextText with a typed scale: Typo picks the element and size (h1–h6 render headings, the rest a paragraph) and Color the theme colour. Replaces MudText.-
ImageA plain img with typed helpers: Width and Height in pixels, ObjectFit for cropping, and Fluid to scale with its container. - ● Online8newIndicatorPins an Item (badge, status dot, anything) to a corner, edge or centre of its content using daisyUI's indicator. Horizontal and Vertical choose among nine positions.
Feedback
Alerts, progress, dialogs, snackbars and loading states.
- Staging deploy passed.Database maintenance runs Friday.Your Pro trial ends in 3 days.Build #482 failed at step 7.AlertMudAlertA daisyUI alert banner coloured by Severity, with a matching icon added for you. Use it for messages that stay on the page; reach for Snackbar when the message should come and go.
- LoadingA small animated indicator in six styles: spinner, dots, ring, ball, bars and infinity. Use it inline or inside a card while content loads.
Deploying v2.4.0 · 3 regions
Build100%Tests72%Rollout38%ProgressLinearMudProgressLinearA horizontal daisyUI progress bar. Set Value against Max to show how far a task has got, or Indeterminate when you can't tell.Provisioning your workspace
This takes about a minute
ProgressCircularMudProgressCircularA circular spinner for work of unknown length, sized and coloured with the usual enums. It is always indeterminate; use RadialProgress to show a percentage.- 68% storage40%85%RadialProgressA daisyUI ring that fills to Value percent, with the percentage in the middle unless you supply your own content. Good for scores, quotas and timers.
- SkeletonMudSkeletonA pulsing placeholder block shaped like the content that is about to appear. Width and Height take any CSS length; SkeletonType.Circle rounds it.
- Ships v2.4.0 to productionRefreshSettingsTooltipMudTooltipWraps any element in a daisyUI tooltip that shows Text on hover or focus. Placement picks the side; extra classes such as tooltip-primary or tooltip-open go in Class.
Deploy v2.4.0 to production?
12 services restart in all 3 regions on Friday at midnight.
DialogMudDialogModal dialogs opened from code through IDialogService and hosted by DialogProvider. ShowMessageBoxAsync covers quick questions; ShowAsync opens your own component built on Dialog and returns its result.Invite a team member
ModalMudDialog (inline)A modal declared inline in your markup and shown with @bind-Open, no service needed. It renders the same accessible box as DialogProvider: focus moves in, the page behind is inert, Escape closes it and focus returns to the button that opened it.- Task added to the sprintDeploy starts in 5 minutesInvoice INV-1042 paidStorage almost fullSnackbarMudSnackbarProviderToast messages raised from code with ISnackbar.Add and shown bottom-right by SnackbarProvider. Each one auto-dismisses after a delay, pausing while it is hovered or focused.
Delete “Website redesign”?
The project and its 24 tasks will be gone for good.
ConfirmDialogA ready-made confirm or cancel dialog, opened with IDialogService.ShowAsync. Set the body text, the confirm label and its colour; the result is cancelled unless the user confirms.Your inbox is empty
New support tickets will show up here.
EmptyStateA centred icon, message and optional subtitle for a list, search or page with nothing to show. Put it where the content would be instead of leaving a blank space.Checkout
Your card was declined. Try another one.2 × Pro seat, monthly€58.00ErrorAlertA filled error Alert that renders nothing while Message is null, so it can sit unguarded above a form and appear only when something fails.
Data input
Typed form fields with validation that bind to your model.
- Four digits, please.TextFieldMudTextFieldA labelled text input bound to a string, with helper and error text, adornments and a multi-line mode (Lines > 1 renders a textarea). The bound value updates on every keystroke.
- Monthly 3000 €NumericFieldMudNumericFieldA number input generic over T (int, double, decimal, nullable types…), with Min, Max, Step and a display Format. Min and Max drive the native spinner bounds; they do not reject typed values, so validate on submit.
- CustomerNorthwind TradersPlanEnterpriseSince2019Seats250FieldMudFieldA read-only labelled value with the same chrome as a TextField, for showing data in a form layout without making it editable.
- FloatingLabeldaisyUI's floating label: wrap any input and its label sits inside as a placeholder, then floats above once the field is focused or filled.
Pro · 10 seats
SelectMudSelectA native select generic over T, filled with SelectItem children. Supports a clear option, disabled items and multiple selection through SelectedValues.- AutocompleteMudAutocompleteA type-ahead input whose suggestions come from an async SearchFunc, so it works the same against an in-memory list or a remote API. Typing is debounced and stale searches are cancelled.
Launch checklist
CheckboxMudCheckBoxA daisyUI checkbox bound to a bool, with typed Color and Size. Use it for independent on/off choices; Checked is kept as an alias of Value for MudBlazor code.- NotificationsAuto-deployBackupsSwitchMudSwitchA toggle switch bound to a bool, with the same API as Checkbox. Reach for it when the change takes effect immediately, like a setting.
Replicas
RadioMudRadioGroupA RadioGroup holds the selected value; each Radio inside it offers one option. Both are generic over T, and Radio infers T from its group.- CPU72Memory45Storage60RangeMudSliderA slider bound to a double, with Min, Max and Step. It reports every movement as the thumb is dragged.
Customer satisfaction
Acme Cloud
RatingMudRatingA row of stars (or any daisyUI mask) bound to an int from 0 to Max. Clicking the current star again clears it; ReadOnly turns it into a display.Drop a CSV to import
FileInputMudFileUploadBlazor's InputFile styled as a daisyUI file-input. OnChange hands you the picked files to read or upload.- Live in 49 daysDatePickerMudDatePickerA date field bound to a DateTime?. You can type the date in the app's culture format (or DateFormat), or open the browser's native calendar from the icon.
- A#e4572eColorPickerMudColorPickerThe browser's native colour input in a labelled field, bound to a hex string. @bind-Text works too, for MudBlazor code.
Join the beta
That address looks unfinished.FormMudFormForm stacks fields with even spacing and validates the TextField, NumericField and Select inside it: Validate() runs each field's Required and Validation checks and updates IsValid, as MudForm does. Validator and ValidatorHint add daisyUI's CSS-only validation; ServerValidation and FieldError show errors returned by an API.
Layout
Grids, stacks, drawers, heroes and page structure.
- ContainerMudContainerA centred, max-width wrapper for page content with optional side gutters. MaxWidth caps it at a Tailwind breakpoint; drops in for MudContainer.
- Top accounts Top 6123456GridMudGridA 12-column CSS grid whose Item cells span columns per breakpoint (xs, sm, md, lg, xl). Use it for responsive page and card layouts; drops in for MudGrid.
- StackMudStackA flex container with direction, gap, wrapping and alignment as parameters, so you rarely hand-write flex utilities. Column by default; drops in for MudStack.
File storage
Pro plan
2 GB used 5 GBSpacerMudSpacerAn empty flex-grow element that pushes its siblings apart inside a row. Use it in toolbars and headers; drops in for MudSpacer.- Version 1orVersion 2DividerMudDividerA daisyUI divider line, horizontal by default or vertical between side-by-side content, with an optional label in the middle. Drops in for MudDivider.
Projects
DrawerMudDrawerA daisyUI drawer: a side panel next to the main content, opened through two-way bound Open. Ships an accessible toggle button, closes on Escape and moves focus in and out of the panel. On static SSR pages, load drawer.js to keep that behaviour without a circuit.- FooterA daisyUI footer that lays out nav sections, each headed by a FooterTitle. Choose its direction and centring, and colour it with a semantic Color.
New in Acme Cloud
Ship it.
One click to production.
HeroA daisyUI hero: a large, centred banner for a page's opening message. MinHeight sets its height (full screen by default) and BackgroundImage adds a photo behind an overlay.- DevStagingProdPaperMudPaperA base-100 surface with the theme's box radius and an elevation-driven shadow, or a border when Outlined. Everything from cards to sheets sits on it; drops in for MudPaper.
- ANo.1MaskClips its content into a daisyUI mask shape: squircle, circle, heart, star, hexagon and more. Use it for avatars, artwork and decorative badges; Half clips one half for ratings.
Sprint 14
- Redesign the billing page
- Fix the login timeout
- Export invoices to CSV
Backlog
- Dark mode for the dashboard
- SSO for Enterprise
Notes
Sprint review on Friday at 10:00.
ExpansionPanelsMudExpansionPanelsCollapsible daisyUI panels built on native details elements, so they work without JavaScript. One panel open at a time by default, or several with MultiExpansion; drops in for MudExpansionPanels.Projects
12 projects, 4 in progress
Billing revamp Q4Mobile app Q1SSO for Enterprise Q2PageHeaderA page-level header row: title, optional icon and subtitle on the left, action buttons on the right. HeadingLevel picks the heading element so the outline stays correct.Northwind Traders
Owner
Ana Silva
Region
EU West
Customer since
March 2021
Plan
Enterprise Seats
120
DetailLayoutA detail-page scaffold: back button, title with a status slot, main content with an optional sidebar, and a related area. DetailCard and DetailRow fill it with label and value tables.Deploying
api-gateway v2.4
Production, step 2 of 3
SectionCardA Paper surface with an icon and title header, an optional rule and header actions, and a free-form body. Reach for it to group a section of a page; DetailCard is built on it.
Mockup
Browser, phone, window and code frames for showing things off.
Ship faster.
Version 2.4 is out now.
MockupBrowserA daisyUI browser frame with an address bar, for showing a page or screenshot in context. Set Url for the bar or replace it with your own Toolbar.dotnet new blazordotnet add packageDaisyBlazorrestoring…Done. Ready to ship!MockupCodeA daisyUI terminal frame with a prefix on every line. Pass Lines for quick shell snippets, or write your own pre rows to vary prefixes and highlight lines.api-gateway
Deploying…
MockupPhoneA daisyUI phone frame with a camera notch around any screen content. It fills its container's width up to 462px, so size it with a width utility.- DeploymentsDEV api-gateway v2.5STG api-gateway v2.4PRD api-gateway v2.3MockupWindowA daisyUI desktop window frame with an optional title bar, for presenting dialogs and app screens. BorderColor tints the frame.
Data components
Composed building blocks for data-heavy screens.
# Top accounts 1 GlobexAna Silva2 Northwind TradersTom Becker3 ContosoPriya Nair4 FabrikamLucas Martin5 Umbrella CorpMei ChenDataGridA typed, column-based grid on a daisyUI table with client-side sorting and paging, or server-side loading through ServerData. Mirrors MudDataGrid's shape: declare PropertyColumn and TemplateColumn children, add a DataGridPager for paging.Actions Free 5,000 Pro 1,500 Team 1,000 Enterprise 500 1-4 of 4DataTableAn opinionated DataGrid wrapper for list screens: hover and zebra rows, a built-in pager, skeleton loading, an empty state and an optional per-row Actions column.Find accounts
Active filters:
ProEuropeFilterPanelA ready-made filter surface: a title row, your filter inputs laid out on a 12-column Grid, removable active-filter chips and Clear/Filter buttons. You own the filter state; the panel raises OnApply, OnClear and OnRemoveFilter.September at Acme Cloud
Monthly recurring revenue
€48.2 k
+12% vs. August
Active users
18 k
Open tickets
6
KpiCardA headline-number tile: a caption, a large value and an optional subtitle, with a coloured left border. Color takes any CSS colour and defaults to the theme's primary.- #ORD-1042 · Contoso Delivered#ORD-1043 · Fabrikam Shipped#ORD-1044 · Globex Processing#ORD-1045 · Initech DelayedStatusChipA filled chip for status values. Give it a Status and a StatusMap built once per status type, and it picks its own colour and icon; an explicit Label, Color or Icon always wins.
Charts
SVG charts laid out by a bundled D3 module, in the active theme's colours.
Essentials 7
Line, area, bar, pie, donut, sparkline and Sankey: where most dashboards start.
Hierarchy and networks 7
Trees, nested parts and the links between named things.
Distribution 8
How values spread: scatter, density, box plots, histograms.
Over time 9
Calendars, ranges, streams, prices, schedules and rankings over time.
Compare 8
Series side by side: radar, bullet, dumbbell, slope, lollipop and combos.
Composition and progress 9
Totals, shares and targets: waterfalls, funnels, gauges, waffles.
Specialised 6
Polar, Smith, 3D columns, shapes and choropleth maps.