Playground

Every component with its variants, sizes, colors, and states side by side. 64 components.

Accent

All colors

Accordion

Composable sections with keyboard support and clear trigger/content structure.

Docs

Install the package, include the theme stylesheet, and start with a small surface before scaling across the app.

AlertDialog

Confirmation flow for destructive actions with focus trapping and explicit cancel/action controls.

Docs

AspectRatio

Fixed-ratio media containers.

Docs

Variant	16/9	4/3	1/1
ratio

Avatar

content × size, with square and accent variants.

Docs

Variant	small	medium	large
image	SM	SM	SM
fallback	SM	SM	SM
square	SM	SM	SM
accent fallback	SM	SM	SM

AvatarGroup

variant × size, images and fallbacks.

Docs

Variant	small	medium	large
overlap	NIOMMY	NIOMMY	NIOMMY
square	NIOMMY	NIOMMY	NIOMMY
spacing	NIOMMY	NIOMMY	NIOMMY

Badge

variant × size, plus every accent color.

Docs

Variant	small	medium	large	x-large
solid	Badge	Badge	Badge	Badge
soft	Badge	Badge	Badge	Badge
surface	Badge	Badge	Badge	Badge
outline	Badge	Badge	Badge	Badge
ghost	Badge	Badge	Badge	Badge

BlockQuote

variant × size.

Docs

Variant	small	medium	large
default	Predictable APIs keep teams on a design system.	Predictable APIs keep teams on a design system.	Predictable APIs keep teams on a design system.
soft	Predictable APIs keep teams on a design system.	Predictable APIs keep teams on a design system.	Predictable APIs keep teams on a design system.
outline	Predictable APIs keep teams on a design system.	Predictable APIs keep teams on a design system.	Predictable APIs keep teams on a design system.
accent	Predictable APIs keep teams on a design system.	Predictable APIs keep teams on a design system.	Predictable APIs keep teams on a design system.

Button

variant × size, icon composition, and disabled.

Docs

Variant	small	medium	large	x-large	with icon	disabled
solid
soft
outline
ghost

Callout

variant × size, plus every accent color.

Docs

Variant	small	medium	large
default	Keep callout copy short and actionable.	Keep callout copy short and actionable.	Keep callout copy short and actionable.
soft	Keep callout copy short and actionable.	Keep callout copy short and actionable.	Keep callout copy short and actionable.
outline	Keep callout copy short and actionable.	Keep callout copy short and actionable.	Keep callout copy short and actionable.

Card

variant × size with header, content, and footer.

Docs

Variant	small	medium	large
default	Release status Docs refresh in progress.	Release status Docs refresh in progress.	Release status Docs refresh in progress.
outline	Release status Docs refresh in progress.	Release status Docs refresh in progress.	Release status Docs refresh in progress.
soft	Release status Docs refresh in progress.	Release status Docs refresh in progress.	Release status Docs refresh in progress.

CheckboxCards

Card-sized multi-select options with a title and supporting description.

Docs

CheckboxGroup

Related checkboxes that share one controlled value array.

Docs

emailsmspush

Code

variant × size.

Docs

Variant	small	medium	large	x-large
default	`npm run build`	`npm run build`	`npm run build`	`npm run build`
outline	`npm run build`	`npm run build`	`npm run build`	`npm run build`

Collapsible

A single trigger that shows and hides one region of content.

Docs

Tests, changesets, docs, and package artifact checks.

Combobox

Searchable single-select picker with a filterable option list.

Docs

Command

Inline command palette with search, grouped results, and an empty state.

Docs

ContextMenu

Right-click menu anchored to the pointer position.

Docs

DataList

Label and value pairs for metadata and record details.

Docs

Status: Live
Version: 0.6.0

Dialog

General-purpose modal surface for settings, forms, and detail views.

Docs

Disclosure

Stacked show/hide items for FAQ-style content.

Docs

Drawer

Edge-anchored panel for longer workflows without leaving the page.

Docs

DropdownMenu

Button-triggered menu with separators and nested submenus.

Docs

Em

Inline emphasis stays lightweight and composable inside text content.

Docs

Keep the baseline copy calm, then use emphasis only where the reader actually needs direction.

Fieldset

Groups related form controls under a shared legend and message.

Docs

Profile

Common input states in one form block.

First name

Last name

Form message slot

Heading

Type scale for every heading level.

Docs

h1	The quick brown fox
h2	The quick brown fox
h3	The quick brown fox
h4	The quick brown fox
h5	The quick brown fox
h6	The quick brown fox

Kbd

Keyboard hints by size.

Docs

Variant	small	medium	large	x-large
keys	`⌘K`	`⌘K`	`⌘K`	`⌘K`

Link

Inline and standalone links by size.

Docs

Variant	small	medium	large	x-large
standalone	Documentation	Documentation	Documentation	Documentation
inline	Read the docs.	Read the docs.	Read the docs.	Read the docs.

LiveRegion

Announces dynamic status updates to assistive technology.

Docs

Ready

Menubar

Persistent horizontal menu bar for application-level commands.

Docs

Minimap

Compact progress outline for long pages and multi-part flows.

Docs

NumberField

Numeric input with increment and decrement controls and clamped bounds.

Docs

Progress

Determinate progress across its range.

Docs

0%
25%
50%
75%
100%

Quote

Inline quotation for short cited phrases within running text.

Docs

And the time's come to realize there will be Promises I can't Keep

Radio

state × enabled/disabled.

Docs

Variant	enabled	disabled
unchecked
checked

RadioCards

Card-sized single-select options for plans and presets.

Docs

RadioGroup

Roving-focus radio set with arrow-key navigation.

Docs

compactcomfortablespacious

ScrollArea

Custom scrollbars for both axes while keeping native scrolling.

Docs

Scrollable row 1

Scrollable row 2

Scrollable row 3

Scrollable row 4

Scrollable row 5

Scrollable row 6

Scrollable row 7

Scrollable row 8

Scrollable row 9

Scrollable row 10

Scrollable row 11

Scrollable row 12

Select

Single-select dropdown states.

Docs

placeholder
with value
disabled

Separator

Horizontal and vertical dividers.

Docs

horizontal	Above Below
vertical	Docs Playground Colors

Skeleton

Shimmering placeholders that hold layout while content loads.

Docs

Slider

Single thumb, range, and disabled.

Docs

single
range
disabled

Spinner

Indeterminate loading indicator by size.

Docs

Variant	small	medium	large
spinner

Splitter

Resizable panels separated by a draggable, keyboard-accessible handle.

Docs

List

Preview

Steps

Vertical step sequence with bubbles, connecting lines, and content.

Docs

Install

Style

Ship

Strong

Semantic emphasis for meaningfully important words inside regular copy.

Docs

The important part is not that the playground exists, but that it remains accurate as the component APIs evolve.

Switch

state × enabled/disabled.

Docs

Variant	enabled	disabled
off
on

Table

Composable table primitives for structured comparisons and dense datasets.

Docs

Component	Status	Coverage
Accordion	Ready	Docs + playground
Tooltip	Ready	Docs + playground
Link	Docs missing	Playground only

TabNav

Tab-styled navigation links for switching between routes.

Docs

Tabs

Switch between related content panels without leaving the current view.

Docs

The tabs API separates list, trigger, and content so you can keep structure explicit and styling flexible.

Each part stays composable, which makes it easier to control layout, slot in custom content, and adapt the pattern to different page structures.

This is the right fit when users need to compare related sections without losing their place in the current view.

Text

Body text rendered as each supported element.

Docs

p	Start with readable defaults, then layer visual treatment on top.
span	Start with readable defaults, then layer visual treatment on top.
div	Start with readable defaults, then layer visual treatment on top.
label	Start with readable defaults, then layer visual treatment on top.