Components
24 components,documented from their own types.
Each page carries the live examples, the install command, a usage snippet, the props table and — where the component is a single element — a playground that writes the JSX for you.
- components
- 24components
- with a live playground
- 11with a live playground
- palettes, light and dark
- 0palettes, light and dark
Forms
08- ButtonplaygroundThe control everything else borrows its API from — seven variants, a loading state and an optional ripple.
- CalendarDate field with a month grid, min/max clamping, manual entry and a clear affordance.
- CheckboxplaygroundThree-state checkbox — checked, unchecked and indeterminate — with a theme-aware colour preset.
- InputplaygroundText-like field with icon slots. Labels and errors are composed with Field rather than baked in.
- Radio groupA single-choice group with roving focus and arrow-key navigation, vertical or horizontal.
- SelectListbox with optional search, grouping and multi-select, positioned to stay on screen.
- SwitchplaygroundAn on/off control for settings that apply immediately — not a checkbox waiting on a submit.
- TextareaplaygroundMulti-line field that can grow with its content and count characters against maxLength.
Data display
06- AvatarplaygroundImage with an initials fallback, a presence dot, and a group that collapses into a +N counter.
- BadgeplaygroundStatus and count chip with a dot, icons and an optional remove button.
- KbdplaygroundKeycap for shortcuts, on its own or grouped into a chord.
- SeparatorplaygroundA rule, optionally labelled — decorative by default, semantic when you ask for it.
- SkeletonplaygroundPlaceholder surface for the wait, in three shapes and two animations — both of which stop under reduced motion.
- TableComposed from its parts — header, row, cell, empty state — with sorting, sticky heads and zebra rows.
Feedback
05- AlertplaygroundInline message with a semantic icon, three surfaces, and an optional dismiss with an exit animation.
- DialogModal with trapped focus, a restored return point, four positions and a choice of backdrops.
- DrawerA panel that comes in from an edge — four sides, seven animations, and a handle you can push it back out by.
- ToastTransient messages from a provider, with six docks, promise handling and timers that pause when you aren't looking.
- TooltipShort label on hover and on keyboard focus, flipped to stay inside the viewport.
Navigation
05- AccordionDisclosure list in single or multiple mode, with five framings from bordered to ghost.
- BreadcrumbTrail of ancestors, with a collapse point for paths too deep to spell out.
- DropdownA menu hung off a button — icons, shortcuts, checkable rows, radio sets and submenus.
- PaginationPage controls composed from parts, with an ellipsis helper that decides which numbers to show.
- TabsPanelled navigation with a sliding indicator, five variants and both orientations.