Components
69 components, each shown live: overlays render open, so you see the toast, the menu and the dialog themselves. Pick one for its examples, API, tokens and install command.
69 components shown
Actions
ButtonThe action control: primary gradient, glass secondary, ghost, and two danger forms, in three sizes.
IconButtonA square action with only an icon, a required accessible label and a tooltip-friendly hit area.
ButtonGroupJoins Buttons and IconButtons into one segmented row or column with shared outer corners.
Forms
TextInputThe text field: a white box with a tinted edge, a brand halo on focus, adornments and a password reveal.
TextareaMulti-line text in the TextInput box, resizable vertically, with an optional character count.
SelectA custom listbox: a recessed field or filter chip that opens a frosted popover, optionally searchable.
SearchFieldField-size search on the grey frosted recess: clear button, loading state and an optional key hint.
CheckboxA native checkbox drawn as a gradient tick, plain or as a selectable card, with indeterminate.
RadioGroupOne choice from a few: a list, inline, or cards in 1 to 3 columns.
SwitchAn on/off setting that takes effect immediately, with a loading state while it saves.
OtpInputA six-cell one-time code entry with paste, auto-advance and onComplete.
DateFieldA typed DD/MM/YYYY field with a calendar popover, min/max and a date-of-birth preset.
DateRangeFilterA date-range chip for filter rows: presets plus a two-month range calendar.
FileDropA drop zone and file picker with type and size checks and per-file status chips.
FieldLabel, hint, error and required marker for any control, wired through context.
ErrorSummaryThe list of form errors at the top of a form, focused on submit, each linking to its field.
PrefixedInputA fixed-format code with a set prefix: an invoice number, an account code, a membership number.
LabelA standalone form label with required and optional markers, for controls outside a Field.
InputGroupA text field with addons joined to it: a fixed text segment, an icon, or a button such as Copy.
ComboboxA text field that filters a list of options as you type and picks one, with optional create.
SliderPicks a number or a range by dragging along a track, with steps, marks and a value readout.
ToggleA two-state button, pressed or not, for toolbar formatting and view options.
ToggleGroupA set of toggles sharing one value: single (a clearable radio set) or multiple.
CalendarThe month grid on its own: a single date or a range, one or two months, with month and year pickers.
TimeField and TimeRangeFieldA time of day with typed input and a popup picker; the range variant pairs start and end on one row.
DateTimeField and DateTimeRangeFieldA date and a time of day on one row, each with its own popup; the range variant pairs a start and end.
Data display
TableThe one table look: neutral header row, whole-cell sortable headers, skeleton, empty and error states, and Pagination.
StatusPill, Badge and CountBadgeStatus pills (tinted fill, tinted edge, deep ink), small uppercase tags, and count badges.
AvatarInitials on the brand gradient or a neutral disc, in three sizes.
Meter and ProgressBarA segmented meter for small counts (seats used) and a bar for progress through a total.
ProgressStepsA horizontal track of steps with detail and meta lines, or a compact dot track for table cells.
Kbd and KbdGroupKeyboard keys as small raised key caps, alone or as a combination.
ChartThemed charts on Recharts: line, area, bar and donut in one frame with a table view, plus sparklines and a stat strip.
Navigation
StepperThe wizard's step list: lettered markers, states, and optional navigation back to finished steps.
FilterBarThe one filter row above every table: a growing search, dropdown chips at the end, clear, and the list's own action.
FolderTabs and SegmentedControlFolder tabs that sit on a glass panel with always-visible counts, and a segmented control for views.
NavSearch and SmartSearchTop-bar search: NavSearch jumps to pages and actions; SmartSearch queries records with grouped results.
BreadcrumbWhere this page sits: a trail of links ending on the current page, folding its middle into a menu when long.
NavigationMenuTop-level site navigation with frosted dropdown panels of described links, built as disclosure navigation.
PaginationCentred page buttons with previous and next, gaps for long ranges, and a summary line at the left.
Feedback
SkeletonLoading placeholders shaped like the content they stand in for, with a soft shimmer.
AlertAn inline message in a tone (info, success, warning, danger) or a quiet legal box for fixed wording, with an action and dismiss.
ToastFrosted toasts for success, error, info and in-flight work, stacked as a deck that fans out on hover.
SpinnerA small brand-tinted spinner for in-flight work inside buttons, fields and panels.
EmptyStateWhat an empty list means and what to do next: default, positive (all done) and filtered tones.
ImpactPreviewWhat a destructive action will change, row by row, before it is confirmed.
Overlays
MenuAn action menu from a button: groups, headings, separators, icons, links and danger items, in a frosted popover.
Tooltip and ToggletipHover and focus tooltips (dark one-liners or light rich cards) and click-to-open toggletips for help.
ModalA frosted dialog with a focus trap, scroll lock, inert page, scroll-aware edges and a bottom sheet on phones.
TypeToConfirmModal and DangerZoneThe heaviest confirm: an impact preview and a typed phrase; and the Danger zone section that leads to it.
PopoverAn anchored frosted panel for arbitrary content: a short form, a set of options, a details block.
HoverCardA rich preview on hover or keyboard focus of a link: a person, a project, a record.
ContextMenuA menu of actions for a region, opened at the pointer with a right-click, Shift+F10 or a long press.
Sheet and DrawerA panel that slides in from an edge over a scrim, and a bottom Drawer with a drag handle.
AlertDialogA short interrupting confirm with Cancel and one action; focus starts on Cancel and the scrim never dismisses it.
CommandA command palette: a search box over grouped actions with shortcuts, keyboard-first, inline or as a Ctrl+K dialog.
MenubarA desktop application menu bar (File, Edit, View) with keyboard navigation across and within its menus.
Layout and surfaces
GlassPanelFrosted glass over the page field: page, light and nested variants, padding steps and an optional bloom.
CardA solid card with a washed header, a lifted highlight tone, and a sunken muted tone.
ScrollArea, useScrollEdges and useScrollLockThe modal's scroll, made portable: thin tinted scrollbars, contained overscroll, edge shadows and a shared scroll lock.
DividerA hairline rule, horizontal or vertical, optionally labelled, with spacing steps.
AccordionStacked sections that open and close in place: one at a time or several, on glass or plain hairlines.
CollapsibleOne disclosure: a title row with a toggle, an always-visible summary and a region that opens beneath it.
CarouselA row of slides on a native scroll-snap track, with frosted prev and next buttons, dots and arrow keys.
AspectRatioA box held to a width-to-height ratio, so media keeps its shape and never shifts the layout while loading.
ResizablePanels split by draggable hairline handles, side by side or stacked, with keyboard resizing and minimum sizes.
Shell
SidebarShellThe signed-in frame in four layouts: an expanded frosted sidebar, a collapsible icon rail, a header-only top nav, and a drawer on narrow screens.
PageHeaderA page's h1 with a back link, a meta line, a description and actions.
AuthCard and AuthLayoutThe sign-in card: a solid card on a deep field, with a logo slot, icon tile, title, footer strip and back link.