Playground coverage for the full documented component set
Each section uses the current public API, keeps the layout neutral, and links back to the corresponding documentation page where one exists.
Accordion
Composable sections with keyboard support and clear trigger/content structure.
AlertDialog
Confirmation flow for destructive actions with focus trapping and explicit cancel/action controls.
AspectRatio
Media containers that preserve layout before content finishes loading.
Avatar
Compound avatars with image fallback, variant, and size coverage.
AvatarGroup
Compact grouped avatars for teams, activity lists, and participant summaries.
Badge
Variants, sizes, and semantic labels with current badge props.
BlockQuote
Supported size and variant combinations for longer content blocks.
Thoughtful defaults make design systems faster to adopt, but predictable APIs are what keep teams on them.
Ship demos that show the happy path first, then layer on the color and sizing matrix once the base component is stable.
Buttons
Current button variants and sizes, including icon composition.
Callout
Structured messaging blocks for status, guidance, and warnings.
Playground examples are intentionally minimal so the component behavior stays obvious.
Keep dense copy short inside callouts or the page turns into documentation inside documentation.
Card
Structured surface with header, content, action, and footer regions.
Release status
Snapshot of the current docs refresh work.
Playground coverage now mirrors the documented component set instead of a small hand-picked subset.
Team
Two editors currently active in docs.
Code
Inline code snippets with current variants and sizing.
Render your app shell before calling startTransition() so the interface stays responsive.
npm run buildpnpm lintuseDeferredValue(query)Dialog
General-purpose modal surface for settings, forms, and detail views.
Em
Inline emphasis stays lightweight and composable inside text content.
Keep the baseline copy calm, then use emphasis only where the reader actually needs direction.
Heading
Type scale preview using the current heading component and semantic tags.
Playground demos should read like product UI, not fixture data
Section hierarchy becomes obvious when scale and rhythm are consistent
Use lower levels for support copy and dense surfaces
Keep headings short enough to scan in a list
Reserve smaller headings for local grouping
They should still feel intentional
Kbd
Keyboard hint styling for shortcuts and command palettes.
Open search with Cmd + K and close dialogs with Esc.
Separator
Horizontal and vertical separators inside a denser card layout.
Release NotesPlayground refresh
Replaced deprecated demo patterns, wired up valid docs links, and reduced the accent loop to readable samples.
Status: shipped
Coverage: core typography and primitives
Updated today
Progress
Completion states for uploads, onboarding steps, and background work.
Documentation migration
Playground refresh
Strong
Semantic emphasis for meaningfully important words inside regular copy.
The important part is not that the playground exists, but that it remains accurate as the component APIs evolve.
Switch
Binary settings control with thumb and track subcomponents.
Table
Composable table primitives for structured comparisons and dense datasets.
| Component | Status | Coverage |
|---|---|---|
| Accordion | Ready | Docs + playground |
| Tooltip | Ready | Docs + playground |
| Link | Docs missing | Playground only |
Tabs
Switch between related content panels without leaving the current view.
Link
Links now include real destinations and size variants instead of placeholder anchors.
Pair inline links with supporting copy so users know what they are leaving for, like the button documentation or the badge examples.
Text
Plain text remains the default body primitive for paragraphs and support copy.
Start with readable defaults, then layer visual treatment on top. The playground should explain the components while it demonstrates them.
as override without dropping into an unsupported element.Toggle
Pressable on/off control for formatting, filters, and simple state toggles.
ToggleGroup
Related toggle controls grouped for multi-select or single-select formatting patterns.
Tooltip
Compact hover and focus hint for labels, shortcuts, and secondary detail.
VisuallyHidden
Hide text visually while keeping it available to screen readers.
Icon-only controls can still expose a complete label to assistive technology.