Documentation
Components
Every component in the library, with what it is for. Search by name, by the name another library uses for it, or by what you want it to do.
Buttons
Trigger actions, open menus, and hold a pressed state.
ActionButtonAn icon-first, transparent button for inline actions like New, Edit or Share.ButtonThe primary way to trigger an action, in fill, outline and text variants.ButtonGroupJoins related buttons into one unit, optionally single- or multi-select.MenuButtonA button that opens a menu of related actions, with split and sticky modes.ToggleButtonA button that stays pressed and reports its state through aria-pressed.
Inputs
Collect and validate everything a form needs.
CalendarA full inline calendar for browsing and picking a date, with optional time.CheckboxA yes/no box with a label, and an indeterminate state for partial selections.ChoiceGroupRadio, RadioButtonRadio buttons: pick exactly one value from a set of mutually exclusive options.DropdownSelect, ComboBoxSingle or multi select from a list, with search, chips, grouping and virtualization.FileInputThe selection half of file handling: browse, drag and drop, capture from camera.FileUploadThe transport half: chunked, resumable uploads with per-file progress.NumberFieldNumberInputA text field dedicated to numbers, with steppers, bounds and formatting.OtpInputThe row of boxes a one-time passcode is typed into, with paste and auto-advance.RatingTurns an opinion into a row of stars: hover to preview, click to commit.SearchBoxAn input for searching, with suggestions, debouncing and a clear button.SliderRangeTurns a number into a distance you can point at, single value or range.TagsInputTurns free text into a list of short values confirmed with Enter.TextFieldTextInputThe way people enter and edit text, single line or multiline.ToggleSwitchA switch for a setting that takes effect immediately.
Pickers
Drop-down controls for dates, times, and colors.
CircularTimePickerPicks a time from an analog clock dial the pointer snaps to.ColorPickerThe panel a color is chosen on: shade, hue, alpha and a live preview.DatePickerA drop-down calendar for a single date, with a typeable text field.DateRangePickerA drop-down calendar for a start and end date, with optional times.TimePickerA drop-down for an hour and minute value, with a typeable text field.
Layouts
Structure a page: headers, footers, grids, and stacks.
FooterThe bar at the bottom of a site or an application.GridDivides the available width into equal columns and lays its items out on them.HeaderThe bar at the top of a site or an application.LayoutThe base structure of an app: header, footer, nav panel and a scrolling middle.SpacerPushes flex siblings apart, absorbing whatever space is left over.StackWrapPanelA flexbox container that expresses direction, alignment and gap as parameters.
Lists
Render collections as lists, carousels, and timelines.
BasicListRenders a list of items into a scrolling region, one template per item.CarouselSlideShowA slideshow of items across sliding pages, with autoplay and indicators.SwiperTouchSliderA touch slider: a swiping row of items with momentum and snapping.TimelineEvents in chronological order along a vertical or horizontal line.
Navs
Move people around an app and show them where they are.
BreadcrumbShows where a page sits in the hierarchy, and the way back up.DropMenuA button that opens a callout hosting any content: a list, a form, a filter.NavTree, TreeViewLinks to the main areas of an app, and a tree view for hierarchical data.NavBarNavMenu, TabPanelA bar of navigation links to the main areas of an app, the way a mobile app puts its top-level destinations along the bottom of the screen.PaginationMoves between pages of a long collection.PivotTab, TabPageTabs for switching between frequently accessed, distinct content categories.
Notifications
Tell people what happened, and how important it was.
BadgeA small marker on another element: a count, a dot, a status.MessageAlert, MessageBarAn inline bar for an error, a warning, or something worth knowing.PersonaAvatarA person: their avatar, name, secondary text and presence.SnackBarToastA brief, dismissible notification that stacks in a corner of the screen.TagChipA compact chip representing an attribute, a person or an asset.
Progress
Show that work is happening, and how far along it is.
Surfaces
Containers that hold content: cards, dialogs, panels, popovers.
AccordionExpanderShows and hides one section of related content at a time.CalloutPopover, PopupAn anchored tip that teaches or guides without blocking the app.CardA container that wraps a piece of content into a surface of its own.CollapseAnimates a block of content open and shut.DialogA temporary pop-up that takes focus and asks for a decision.ModalA full overlay for content that has to be dealt with before anything else.ModalServiceOpens modals from anywhere in the app, with any content.PanelA sheet that slides in from an edge for supplementary content.ScrollablePaneScrollViewA scrolling region with themed scrollbars and scroll helpers.SplitterDivides a container into two sections the reader can resize.TooltipA short description that appears on hover or focus.
Utilities
Small building blocks the other components are made of.
CascadingValueProviderCascades several values to child components without nesting providers.ElementRenders any HTML tag with the library's own styling parameters.IconRenders a Fabric glyph, or an icon from any other set you point it at.ImageAn image with cover modes, loading states and a fallback.LabelGives a name to a control or a group of controls.LinkAnchorNavigates elsewhere, inside the app or out of it.MediaQueryReports the library's breakpoints to your component as a parameter.OverlayDims everything behind a piece of UI to put the emphasis on it.ParamsCascades shared parameter objects so components inherit common defaults.PullToRefreshAdds pull-down-to-refresh to a page or a scrolling element.SeparatorVisually divides content into groups, with an optional label.StickyPins an element in place while the rest of the page scrolls past.SwipeTrapTraps swipe gestures on an element and reports them as events.TextApplies the theme's typography ramp to a run of text.
Extras
Larger components that ship in the separate Extras package.
AccordionListExpander, AccordionAn accordion that builds its expandable items from a single collection.AppShellThe cross-platform application container: safe areas, scroll state, chrome.ChartA native Blazor charting component rendered entirely with SVG.DataGridAn information-rich grid with sorting, filtering, paging and virtualization.ErrorBoundaryCatches exceptions thrown by its children and renders a fallback.FlagRenders the flag of a country from its code.FullCalendarSchedulerA scheduler with day, week, month, year, agenda and resource views.InfiniteScrollingLoads the next page of a list as the reader reaches the bottom.MapAn interactive map with pluggable providers, markers, vectors and GeoJSON.MarkdownEditorMdEditorA native markdown editor with a toolbar, shortcuts and smart lists.MarkdownViewerMdViewer, MDRenders Markdown to HTML entirely in C#, so it survives prerendering.MessageBoxA ready-made box for showing a message with a title and body.NavPanelA vertical navigation panel with search, grouping and a collapsed rail.PdfViewerPdfReader, PdfA pure-C# PDF viewer: no pdf.js, works in every render mode.PhoneInputA phone number field with a searchable country selector and flags.ProModalThe modal, extended: draggable, resizable, stackable, with a header slot.ProModalServiceOpens ProModals from anywhere in the app, with any content.ProPanelThe panel, extended: modeless, full-screen, and scroll-aware modes.RichTextEditorA native WYSIWYG editor written in C#, with a configurable toolbar.TextShimmerSkeleton, Loading, AIA gradient band sweeping across text, for AI-style streaming states.VirtualizeVirtualScroll, WindowingRenders only the rows currently in view, for very long lists.
Legacy
Previous implementations, kept unchanged for backward compatibility.
ChartLegacyThe original Chart.js based charting component.DataGridLegacyThe original data grid, previously named BitQuickGrid.MarkdownEditorLegacyThe original markdown editor.MarkdownViewerLegacyThe original marked.js based markdown viewer.PdfReaderLegacyThe original pdf.js based PDF reader.RichTextEditorLegacyThe original Quill based rich text editor.
Theming
Ready-made chrome for switching design system, scheme, and accent.
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.