Mushilu-San UI Components
Every documented component, by entry point.
Primitives
AvatarShows a user image, or their initials when no image is available. BadgeA small label or count that marks status, category or a number of new items. ButtonTriggers an action or navigation, with variants, sizes and a loading state. DividerA thin line that separates sections of content, optionally with a label. IconA set of built-in outline icons, sized and coloured with the surrounding text. SpinnerAn animated indicator that shows work is in progress and the page is waiting.
Forms
CalendarA month grid for picking a single date, with keyboard navigation. CheckboxA native checkbox for selecting one or more independent options. Date pickerA button that opens a calendar panel to choose a single date. Form fieldWraps one control with its label, hint text and error message. InputA single-line text field with sizes, visual variants and an invalid state. Input groupJoins an input with text or icon addons, such as a currency sign or a unit. Input OTPFixed-length code entry, one character per box, for one-time passwords. LabelA styled text label linked to a form control, with a required marker. RadioA native radio button for choosing exactly one option from a set. SelectA native dropdown for choosing one value from a fixed list. SliderPicks a number inside a range by dragging a thumb or using the keyboard. TextareaA multi-line text field for longer free-form input. ToggleAn on/off switch for a setting that takes effect immediately. Toggle groupA row of toggle buttons where one or several can be pressed.
Layout
Aspect ratioKeeps its content at a fixed width-to-height ratio, such as 16:9 for video. ContainerCentres page content and limits its width to a readable measure. GridLays out children in a fixed number of equal columns, with gaps between them. ResizableSplits an area into panels that the user can resize by dragging a handle. Scroll areaA region with a styled scrollbar for content that is taller or wider than its box. SidebarAn app navigation column with sections, items and a collapse control. SpacerAn empty element that adds a fixed gap or fills the free space in a flex row. StackArranges children in a row or column with a consistent gap.
Navigation
BreadcrumbShows where the current page sits in a hierarchy, with links back to each level. MenubarA horizontal bar of menus, such as File, Edit and View, for desktop-style commands. Nav linkA styled link for navigation bars, with an active state for the current page. Navigation menuA site navigation bar where some items open a panel of links. PaginationMoves through pages of results with previous, next and numbered controls. TabsSwitches between related panels of content in the same view.
Feedback
AlertAn inline message that tells the user about a success, warning, error or information on the page. Alert dialogA modal that asks the user to confirm an action before it runs, such as deleting data. DialogA modal window for focused tasks, built on the native <dialog> element. ProgressShows how far along a known task is, as a linear or circular bar. SheetA panel that slides in from an edge of the screen for secondary tasks. SkeletonA grey placeholder that shows the shape of content while it loads. ToastA short, temporary message that appears at the edge of the screen and dismisses itself.
Data display
AccordionA stack of headings that each show or hide their own panel of content. CardA bordered surface that groups related content, optionally clickable as a whole. CarouselA set of slides shown one at a time, with previous and next controls and dots. ChartA bar, line, pie or doughnut chart drawn from a data set, with an accessible name. Empty stateA placeholder for a list or area with no content yet, with a title, text and an action. TableA data table with column headers, optional sorting and a sticky header. TooltipA short hint that appears when the user hovers or focuses an element. TypographyApplies the library type scale to headings, body text, quotes and code.
Mobile
Bottom sheetA panel that rises from the bottom of the screen, within easy reach on a phone. Floating action buttonA round or extended button that floats over the page for the main action of a screen. Mobile navigationA fixed bottom bar of three to five destinations, with badges for new items. Swipe actionA list row that reveals action buttons when swiped, such as delete or archive.
Overlays
ComboboxA button that opens a searchable list of options to choose one value from. CommandA searchable list of commands and pages, the building block for a command palette. Context menuA menu that opens at the pointer on right-click or long press, with actions for the area under it. Dropdown menuA button that opens a menu of actions for the item or page around it. Hover cardA preview card that appears after a short hover over a link or name. PopoverA floating panel that opens from a trigger and holds richer content than a menu.