Navigation

Components

70 components, drawn here in matte.

actions

Button Five variants and four sizes, with a loading state and an href mode. buttonLink Anchor in any tone, with an external variant. link

forms

Input Text field with prefix and suffix slots, sizes and an invalid state. inputTextarea Multi-line field that can grow with its content. textareaSelect Native select with a chevron and data-driven options. selectCheckbox Single checkbox with a label, description and indeterminate state. checkboxRadio Single radio bound to a shared group value. radioSwitch On/off toggle with a label and description. switchField Wraps any control with a label, hint and error message. fieldLabel Form label with an optional required marker. labelSlider Range input with ticks and a printed value. sliderRadioGroup A set of radios, optionally rendered as selectable cards. radio-groupCheckboxGroup A set of checkboxes bound to a string array, with an optional cap. checkbox-groupSegmentedControl Exclusive choice as one joined row, with arrow-key movement. segmented-controlInputGroup Joins an input to a button or addon with a single shared border. input-groupInputAddon Fixed label joined to an input inside an InputGroup. input-addonSearchInput Search field with a clear button and a debounced callback. search-inputPinInput One box per character, with paste spreading and arrow keys. pin-inputTagsInput Free-text tokens committed on Enter, deduplicated and capped. tags-inputCurrencyInput Amount field that groups on blur and binds a number. currency-inputTimeInput HH:MM field with steppers, bounds and a minute step. time-inputColorInput Hex field paired with the native swatch and fixed choices. color-inputFileInput One-line file picker with type, size and count validation. file-inputCombobox Single-select with a text filter and keyboard navigation. comboboxMultiSelect Multi-select with chips, grouping and a selection cap. multi-selectDatePicker Text field plus a calendar popover. Value is a YYYY-MM-DD string. date-pickerCalendar Month grid with keyboard navigation, bounds and disabled days. calendarDropzone Drag-and-drop file input with type, size and count validation. dropzone

data display

Badge Pill label for status and counts. Solid, soft or outline. badgeAvatar Image or initials, circular or squared, in five sizes. avatarAvatarGroup Overlapping row of avatars, each ringed in the background. avatar-groupCard Surface with an optional header and footer, in three variants. cardStat Figure with a label, delta and trend arrow. statTable Data-driven table with sorting, row selection and a cell snippet. tableKbd Keyboard key. kbd

feedback

Alert Inline message in any tone, optionally dismissible. alertProgress Determinate or indeterminate bar, in three sizes. progressSpinner Rotating ring that inherits the surrounding colour. spinnerSkeleton Pulsing placeholder in text, block or circle form. skeletonEmptyState Placeholder for an empty list, with a glyph and an action slot. empty-stateToaster Renders the toast queue. Mount once, near the root. toaster

layout & navigation

Divider Rule, horizontal or vertical, with an optional caption. dividerTabs Underline, pill or segmented tabs bound to a value. tabsAccordion Wrapper that stacks collapsible items. accordionAccordionItem A single collapsible row, built on <details> so it works without JS. accordion-itemBreadcrumb Trail of links to the current page. breadcrumbPagination Page numbers that collapse to an ellipsis around the current one. paginationSteps Progress through a flow, horizontal or vertical, with a failed state. steps

app shell

Navbar Top bar that collapses into a drawer below the md breakpoint. navbarSidebar Nested, collapsible navigation rail for an app shell. sidebarFooter Site footer with link columns and a bottom bar. footer

marketing

HeroSection Page opener — eyebrow, headline, copy, actions, optional media column. hero-sectionFeatureGrid Section wrapper that lays feature cards out in 2, 3 or 4 columns. feature-gridFeatureCard One feature: glyph, heading, copy. Optionally a whole link. feature-cardPricingCard One plan: price, period, ticked feature list, optional featured styling. pricing-cardTestimonial A quote with an attributed author. testimonialLogoCloud Row of client or partner marks, dimmed until hovered. logo-cloudCTASection Closing call to action, in three variants. cta-sectionStatsBand A row of figures, built on Stat. stats-band

overlay

Modal Centred dialog on the native top layer, with a footer slot. modalDrawer Panel that slides in from any edge, on the native dialog top layer. drawerConfirmDialog Small dialog that stays busy until an async confirm settles. confirm-dialogCommandPalette Cmd+K launcher with grouping, shortcuts and hidden keywords. command-paletteContextMenu Right-click menu placed at the pointer, flipped near the edges. context-menuDropdown Menu anchored to a trigger, with focus trap and viewport flipping. dropdownMenuItem Row inside a Dropdown or ContextMenu, with a shortcut hint. menu-itemMenuSeparator Rule between menu groups, with an optional caption. menu-separatorPopover Anchored panel that opens on click or hover. popoverThemeToggle Light, dark and system, remembered in localStorage. theme-toggleTooltip CSS-only label on hover and focus, in four placements. tooltip
esc
Accordion Wrapper that stacks collapsible items.
AccordionItem A single collapsible row, built on <details> so it works without JS.
Alert Inline message in any tone, optionally dismissible.
Avatar Image or initials, circular or squared, in five sizes.
AvatarGroup Overlapping row of avatars, each ringed in the background.
Badge Pill label for status and counts. Solid, soft or outline.
Breadcrumb Trail of links to the current page.
Button Five variants and four sizes, with a loading state and an href mode.
Calendar Month grid with keyboard navigation, bounds and disabled days.
Card Surface with an optional header and footer, in three variants.
Checkbox Single checkbox with a label, description and indeterminate state.
CheckboxGroup A set of checkboxes bound to a string array, with an optional cap.
ColorInput Hex field paired with the native swatch and fixed choices.
Combobox Single-select with a text filter and keyboard navigation.
CommandPalette Cmd+K launcher with grouping, shortcuts and hidden keywords.
ConfirmDialog Small dialog that stays busy until an async confirm settles.
ContextMenu Right-click menu placed at the pointer, flipped near the edges.
CTASection Closing call to action, in three variants.
CurrencyInput Amount field that groups on blur and binds a number.
DatePicker Text field plus a calendar popover. Value is a YYYY-MM-DD string.
Divider Rule, horizontal or vertical, with an optional caption.
Drawer Panel that slides in from any edge, on the native dialog top layer.
Dropdown Menu anchored to a trigger, with focus trap and viewport flipping.
Dropzone Drag-and-drop file input with type, size and count validation.
EmptyState Placeholder for an empty list, with a glyph and an action slot.
FeatureCard One feature: glyph, heading, copy. Optionally a whole link.
FeatureGrid Section wrapper that lays feature cards out in 2, 3 or 4 columns.
Field Wraps any control with a label, hint and error message.
FileInput One-line file picker with type, size and count validation.
Footer Site footer with link columns and a bottom bar.
HeroSection Page opener — eyebrow, headline, copy, actions, optional media column.
Input Text field with prefix and suffix slots, sizes and an invalid state.
InputAddon Fixed label joined to an input inside an InputGroup.
InputGroup Joins an input to a button or addon with a single shared border.
Kbd Keyboard key.
Label Form label with an optional required marker.
Link Anchor in any tone, with an external variant.
LogoCloud Row of client or partner marks, dimmed until hovered.
MenuItem Row inside a Dropdown or ContextMenu, with a shortcut hint.
MenuSeparator Rule between menu groups, with an optional caption.
Modal Centred dialog on the native top layer, with a footer slot.
MultiSelect Multi-select with chips, grouping and a selection cap.
Navbar Top bar that collapses into a drawer below the md breakpoint.
Pagination Page numbers that collapse to an ellipsis around the current one.
PinInput One box per character, with paste spreading and arrow keys.
Popover Anchored panel that opens on click or hover.
PricingCard One plan: price, period, ticked feature list, optional featured styling.
Progress Determinate or indeterminate bar, in three sizes.
Radio Single radio bound to a shared group value.
RadioGroup A set of radios, optionally rendered as selectable cards.
SearchInput Search field with a clear button and a debounced callback.
SegmentedControl Exclusive choice as one joined row, with arrow-key movement.
Select Native select with a chevron and data-driven options.
Sidebar Nested, collapsible navigation rail for an app shell.
Skeleton Pulsing placeholder in text, block or circle form.
Slider Range input with ticks and a printed value.
Spinner Rotating ring that inherits the surrounding colour.
Stat Figure with a label, delta and trend arrow.
StatsBand A row of figures, built on Stat.
Steps Progress through a flow, horizontal or vertical, with a failed state.
Switch On/off toggle with a label and description.
Table Data-driven table with sorting, row selection and a cell snippet.
Tabs Underline, pill or segmented tabs bound to a value.
TagsInput Free-text tokens committed on Enter, deduplicated and capped.
Testimonial A quote with an attributed author.
Textarea Multi-line field that can grow with its content.
ThemeToggle Light, dark and system, remembered in localStorage.
TimeInput HH:MM field with steppers, bounds and a minute step.
Toaster Renders the toast queue. Mount once, near the root.
Tooltip CSS-only label on hover and focus, in four placements.