Skip to main content

Story Catalog

Filesystem-style tree grouped by category and component.

Preview Canvas

All stories render in this scrollable canvas. The catalog highlights PortalHost / Default and syncs the URL query.

Button / Default

button-default

Primary button baseline from @workspace/ui

Card / Default

card-default

Card layout baseline from @workspace/ui

Project Card

Reusable content container for workspace screens.

This is the default card preview.

Input / Default

input-default

Input field baseline from @workspace/ui

Alert / Default

alert-default

Status and warning container for user feedback

Switch / Default

switch-default

Boolean control with accessible switch semantics

Separator / Default

separator-default

Divider primitive to structure dense layouts

Top section

Bottom section

Progress / Default

progress-default

Linear progress indicator for long-running tasks

Avatar / Default

avatar-default

Profile visual with fallback initials

DS

RadioGroup / Default

radio-group-default

Single-choice selection control with labels

Skeleton / Default

skeleton-default

Loading placeholder for perceived performance

Select / Default

select-default

Dropdown input for controlled single value selection

Slider / Default

slider-default

Drag control for choosing a numeric range value

Spinner / Default

spinner-default

Compact loading indicator for async operations

Accordion / Default

accordion-default

Expandable sections for dense settings and FAQs

Content for the first section.

ToggleGroup / Default

toggle-group-default

Exclusive or multi toggle control for tool modes

HoverCard / Default

hover-card-default

Lightweight preview surfaced on pointer hover

This story mounts a portal or overlay surface. Click to render it on demand.

Dialog / Default

dialog-default

Modal surface for confirmations and focused tasks

This story mounts a portal or overlay surface. Click to render it on demand.

Popover / Default

popover-default

Anchored panel for contextual actions and forms

This story mounts a portal or overlay surface. Click to render it on demand.

Tooltip / Default

tooltip-default

Brief hint tied to a control on hover or focus

This story mounts a portal or overlay surface. Click to render it on demand.

DropdownMenu / Default

dropdown-menu-default

Command list triggered from a button or icon

This story mounts a portal or overlay surface. Click to render it on demand.

Collapsible / Default

collapsible-default

Single section expand and collapse without accordion chrome

Collapsible content stays mounted and shows when expanded.

ScrollArea / Default

scroll-area-default

Custom scrollbars for bounded panels and lists

Line 1 — scroll the viewport when content overflows.

Line 2 — scroll the viewport when content overflows.

Line 3 — scroll the viewport when content overflows.

Line 4 — scroll the viewport when content overflows.

Line 5 — scroll the viewport when content overflows.

Line 6 — scroll the viewport when content overflows.

Line 7 — scroll the viewport when content overflows.

Line 8 — scroll the viewport when content overflows.

Line 9 — scroll the viewport when content overflows.

Line 10 — scroll the viewport when content overflows.

Line 11 — scroll the viewport when content overflows.

Line 12 — scroll the viewport when content overflows.

ContextMenu / Default

context-menu-default

Actions menu opened from right-click or long-press

This story mounts a portal or overlay surface. Click to render it on demand.

Toggle / Default

toggle-default

Two-state button for toolbars and formatting

AspectRatio / Default

aspect-ratio-default

Locks width-height ratio for media and placeholders

16:9

Breadcrumb / Default

breadcrumb-default

Path trail for hierarchy and location context

Menubar / Default

menubar-default

Desktop style top menu for grouped commands

NavigationMenu / Default

navigation-menu-default

Structured nav with trigger and content panel

PageHeader / Default

page-header-default

Standard page title and subtitle block

Design Workspace

Manage your libraries and production assets.

EmptyState / Default

empty-state-default

Clear no-data state with title and helper copy

No palettes yet

Create your first palette to start organizing colors.

FormField / Default

form-field-default

Label, input metadata, and error text container

We only use this for account notices.

Please enter a valid email address.

Kbd / Default

kbd-default

Keyboard hint token for shortcut callouts

Ctrl

Code / Default

code-default

Inline code text for commands and snippets

pnpm --filter @workspace/ui test

Stack / Default

stack-default

Vertical spacing primitive for flow layouts

Item one
Item two
Item three

Inline / Default

inline-default

Horizontal alignment primitive with configurable gap

One
Two
Three

Center / Default

center-default

Centers children both vertically and horizontally

Centered content

Cluster / Default

cluster-default

Wrap-aware inline grouping for tags and actions

React
TypeScript
Tailwind
Storybook

Surface / Default

surface-default

Neutral elevated container for grouped content

Surface provides a neutral card-like container.

Metric / Default

metric-default

Compact KPI presentation with label and delta

Total Assets

1,248

+4.2% from last week

Container / Default

container-default

Centered max-width layout container

Centered max-width container

Section / Default

section-default

Titled content section with optional description

Recent Projects

Pick up where you left off.

Project A

Toolbar / Default

toolbar-default

Action row with grouped controls

Stat / Default

stat-default

Single metric card with helper text

Total Users

8,420

+3.1% vs last week

Banner / Default

banner-default

Inline informational callout surface

Heads up

Your workspace sync is in progress.

List / Default

list-default

Simple styled list and list item pair

  • Item one
  • Item two
  • Item three

KeyValue / Default

key-value-default

Aligned key/value presentation pattern

ProjectBrand Refresh
OwnerLuke

AppFrame / Default

app-frame-default

Basic app shell scaffold with sidebar and body

Header
Main content

StatusDot / Default

status-dot-default

Compact status indicator dot

Shortcut / Default

shortcut-default

Inline keyboard shortcut grouping

Cmd+K

Table / Default

table-default

Semantic table with header, body, and cell primitives

NameRole
AdaAdmin

DataList / Default

data-list-default

Description list rows for dense key/value data

Project
Brand refresh

Timeline / Default

timeline-default

Vertical timeline with markers and metadata

  1. Shipped

ActivityFeed / Default

activity-feed-default

Stacked activity entries with avatar slots

  • Comment added

Tree / Default

tree-default

Hierarchical tree with expand affordances

  • src

CalendarGrid / Default

calendar-grid-default

Month grid shell for day cells

April 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat

Toast / Default

toast-default

Radix toast surface for ephemeral messages

This story mounts a portal or overlay surface. Click to render it on demand.

Notification / Default

notification-default

Inline notification banner distinct from toast

Update available

InlineNotice / Default

inline-notice-default

Compact tone-aware helper for forms

Check your email for a code.

ResultState / Default

result-state-default

Empty, success, or error outcome block

No results

LoadingBlock / Default

loading-block-default

Centered loading region with label

Syncing…

StepStatus / Default

step-status-default

Pill status for steps in a flow

2

Fieldset / Default

fieldset-default

Grouped fieldset with legend

Account

FieldRow / Default

field-row-default

Label and control alignment row

Email

OtpInput / Default

otp-input-default

Split digit entry for one-time codes

PinInput / Default

pin-input-default

Masked PIN digit inputs

Combobox / Default

combobox-default

Searchable select using cmdk

DatePicker / Default

date-picker-default

Popover calendar for a single date

This story mounts a portal or overlay surface. Click to render it on demand.

RangeInput / Default

range-input-default

Two-thumb range slider

Pagination / Default

pagination-default

Page controls with first, prev, next, last

CommandPalette / Default

command-palette-default

Modal command menu built on cmdk

This story mounts a portal or overlay surface. Click to render it on demand.

SideNav / Default

side-nav-default

Vertical sidebar navigation links

TopNav / Default

top-nav-default

Horizontal app bar with brand and actions

Workspace

SubNav / Default

sub-nav-default

Secondary horizontal section links

TabsNav / Default

tabs-nav-default

Tabbed navigation with Radix Tabs

Details content

Stepper / Default

stepper-default

Numbered vertical steps with status

  1. Account

    Basics

  2. Plan

    Billing

Drawer / Default

drawer-default

Side sheet using dialog primitives

This story mounts a portal or overlay surface. Click to render it on demand.

Sheet / Default

sheet-default

Bottom sheet dialog variant

This story mounts a portal or overlay surface. Click to render it on demand.

ModalHeader / Default

modal-header-default

Title and description block for modals

Modal title

ConfirmDialog / Default

confirm-dialog-default

Precomposed confirm/cancel dialog

This story mounts a portal or overlay surface. Click to render it on demand.

ContextPanel / Default

context-panel-default

Inspector column beside main content

ColorSwatch / Default

color-swatch-default

Clickable color preview swatch

TokenChip / Default

token-chip-default

Design token chip with optional remove

color.primary

TagInput / Default

tag-input-default

Tag entry with keyboard commit

designtokens

PropertyRow / Default

property-row-default

Inspector property label and value row

Opacity
100%

InspectorPanel / Default

inspector-panel-default

Editor-style inspector container

Selection

LayerItem / Default

layer-item-default

Layer list row with depth indent

Frame 1

Grid / Default

grid-default

Responsive CSS grid helper

One

Two

Masonry / Default

masonry-default

Multi-column CSS columns layout

Tall
Short

SplitPane / Default

split-pane-default

Horizontal split with resizable panels

Left
Right

ResizablePanel / Default

resizable-panel-default

Vertical panel group with resize handles

Top
Bottom

DockLayout / Default

dock-layout-default

Dock regions for app shells

Toolbar
Canvas

PanelGroup / Default

panel-group-default

Vertical PanelGroup wrapper

A
B

PriceBadge / Default

price-badge-default

Currency, amount, and cadence display

$29/mo

PlanCard / Default

plan-card-default

Pricing card with features and CTA

Team

$49/seat
  • SSO
  • Audit log

FeatureList / Default

feature-list-default

Checklist of plan features

  • Exports
  • Priority support

KpiGrid / Default

kpi-grid-default

Grid of KPI tiles

MAU

12.4k

Churn

1.2%

FilterBar / Default

filter-bar-default

Toolbar row for filters and actions

MediaCard / Default

media-card-default

Media region with title and footer

Recording

Cover

AspectFrame / Default

aspect-frame-default

Fixed aspect container for media

16:9

ImagePlaceholder / Default

image-placeholder-default

Neutral image placeholder block

VideoFrame / Default

video-frame-default

Responsive video element styling

AudioRow / Default

audio-row-default

Title and inline audio controls

Episode 12

VisuallyHidden / Default

visually-hidden-default

Screen-reader-only text span

Visible hidden

ScreenReaderText / Default

screen-reader-text-default

Alias pattern for assistive-only text

Screen reader only

Truncate / Default

truncate-default

Single-line ellipsis text

Very long label that should not overflow the line

ClampText / Default

clamp-text-default

Multi-line line-clamp paragraph

Long paragraph that clamps to a few lines when space is tight in the layout preview.

PortalHost / Default

portal-host-default

DOM mount id for React portals

This story mounts a portal or overlay surface. Click to render it on demand.