Story Catalog
Filesystem-style tree grouped by category and component.
Preview Canvas
All stories render in this scrollable canvas. The catalog highlights HoverCard / Default and syncs the URL query.
Button / Default
button-defaultPrimary button baseline from @workspace/ui
Card / Default
card-defaultCard layout baseline from @workspace/ui
Project Card
Reusable content container for workspace screens.
This is the default card preview.
Input / Default
input-defaultInput field baseline from @workspace/ui
Alert / Default
alert-defaultStatus and warning container for user feedback
Heads up
Switch / Default
switch-defaultBoolean control with accessible switch semantics
Separator / Default
separator-defaultDivider primitive to structure dense layouts
Top section
Bottom section
Progress / Default
progress-defaultLinear progress indicator for long-running tasks
Avatar / Default
avatar-defaultProfile visual with fallback initials
RadioGroup / Default
radio-group-defaultSingle-choice selection control with labels
Skeleton / Default
skeleton-defaultLoading placeholder for perceived performance
Select / Default
select-defaultDropdown input for controlled single value selection
Slider / Default
slider-defaultDrag control for choosing a numeric range value
Spinner / Default
spinner-defaultCompact loading indicator for async operations
Accordion / Default
accordion-defaultExpandable sections for dense settings and FAQs
ToggleGroup / Default
toggle-group-defaultExclusive or multi toggle control for tool modes
HoverCard / Default
hover-card-defaultLightweight preview surfaced on pointer hover
This story mounts a portal or overlay surface. Click to render it on demand.
Dialog / Default
dialog-defaultModal surface for confirmations and focused tasks
This story mounts a portal or overlay surface. Click to render it on demand.
Popover / Default
popover-defaultAnchored panel for contextual actions and forms
This story mounts a portal or overlay surface. Click to render it on demand.
Tooltip / Default
tooltip-defaultBrief hint tied to a control on hover or focus
This story mounts a portal or overlay surface. Click to render it on demand.
Collapsible / Default
collapsible-defaultSingle section expand and collapse without accordion chrome
Collapsible content stays mounted and shows when expanded.
ScrollArea / Default
scroll-area-defaultCustom scrollbars for bounded panels and lists
Toggle / Default
toggle-defaultTwo-state button for toolbars and formatting
AspectRatio / Default
aspect-ratio-defaultLocks width-height ratio for media and placeholders
Breadcrumb / Default
breadcrumb-defaultPath trail for hierarchy and location context
PageHeader / Default
page-header-defaultStandard page title and subtitle block
Design Workspace
Manage your libraries and production assets.
EmptyState / Default
empty-state-defaultClear no-data state with title and helper copy
No palettes yet
Create your first palette to start organizing colors.
FormField / Default
form-field-defaultLabel, input metadata, and error text container
We only use this for account notices.
Please enter a valid email address.
Kbd / Default
kbd-defaultKeyboard hint token for shortcut callouts
Code / Default
code-defaultInline code text for commands and snippets
pnpm --filter @workspace/ui testStack / Default
stack-defaultVertical spacing primitive for flow layouts
Inline / Default
inline-defaultHorizontal alignment primitive with configurable gap
Center / Default
center-defaultCenters children both vertically and horizontally
Cluster / Default
cluster-defaultWrap-aware inline grouping for tags and actions
Surface / Default
surface-defaultNeutral elevated container for grouped content
Surface provides a neutral card-like container.
Metric / Default
metric-defaultCompact KPI presentation with label and delta
Total Assets
1,248
+4.2% from last week
Container / Default
container-defaultCentered max-width layout container
Section / Default
section-defaultTitled content section with optional description
Recent Projects
Pick up where you left off.
Toolbar / Default
toolbar-defaultAction row with grouped controls
Stat / Default
stat-defaultSingle metric card with helper text
Total Users
8,420
+3.1% vs last week
Banner / Default
banner-defaultInline informational callout surface
Heads up
Your workspace sync is in progress.
List / Default
list-defaultSimple styled list and list item pair
- Item one
- Item two
- Item three
KeyValue / Default
key-value-defaultAligned key/value presentation pattern
AppFrame / Default
app-frame-defaultBasic app shell scaffold with sidebar and body
StatusDot / Default
status-dot-defaultCompact status indicator dot
Shortcut / Default
shortcut-defaultInline keyboard shortcut grouping
Table / Default
table-defaultSemantic table with header, body, and cell primitives
| Name | Role |
|---|---|
| Ada | Admin |
DataList / Default
data-list-defaultDescription list rows for dense key/value data
- Project
- Brand refresh
Timeline / Default
timeline-defaultVertical timeline with markers and metadata
Shipped
ActivityFeed / Default
activity-feed-defaultStacked activity entries with avatar slots
Comment added
Tree / Default
tree-defaultHierarchical tree with expand affordances
- src
CalendarGrid / Default
calendar-grid-defaultMonth grid shell for day cells
April 2026
Toast / Default
toast-defaultRadix toast surface for ephemeral messages
This story mounts a portal or overlay surface. Click to render it on demand.
Notification / Default
notification-defaultInline notification banner distinct from toast
Update available
InlineNotice / Default
inline-notice-defaultCompact tone-aware helper for forms
ResultState / Default
result-state-defaultEmpty, success, or error outcome block
No results
LoadingBlock / Default
loading-block-defaultCentered loading region with label
StepStatus / Default
step-status-defaultPill status for steps in a flow
Fieldset / Default
fieldset-defaultGrouped fieldset with legend
FieldRow / Default
field-row-defaultLabel and control alignment row
OtpInput / Default
otp-input-defaultSplit digit entry for one-time codes
PinInput / Default
pin-input-defaultMasked PIN digit inputs
Combobox / Default
combobox-defaultSearchable select using cmdk
DatePicker / Default
date-picker-defaultPopover calendar for a single date
This story mounts a portal or overlay surface. Click to render it on demand.
RangeInput / Default
range-input-defaultTwo-thumb range slider
Pagination / Default
pagination-defaultPage controls with first, prev, next, last
CommandPalette / Default
command-palette-defaultModal command menu built on cmdk
This story mounts a portal or overlay surface. Click to render it on demand.
Stepper / Default
stepper-defaultNumbered vertical steps with status
Account
Basics
Plan
Billing
Drawer / Default
drawer-defaultSide sheet using dialog primitives
This story mounts a portal or overlay surface. Click to render it on demand.
Sheet / Default
sheet-defaultBottom sheet dialog variant
This story mounts a portal or overlay surface. Click to render it on demand.
ModalHeader / Default
modal-header-defaultTitle and description block for modals
Modal title
ConfirmDialog / Default
confirm-dialog-defaultPrecomposed confirm/cancel dialog
This story mounts a portal or overlay surface. Click to render it on demand.
ContextPanel / Default
context-panel-defaultInspector column beside main content
ColorSwatch / Default
color-swatch-defaultClickable color preview swatch
TokenChip / Default
token-chip-defaultDesign token chip with optional remove
TagInput / Default
tag-input-defaultTag entry with keyboard commit
PropertyRow / Default
property-row-defaultInspector property label and value row
InspectorPanel / Default
inspector-panel-defaultEditor-style inspector container
Selection
LayerItem / Default
layer-item-defaultLayer list row with depth indent
Grid / Default
grid-defaultResponsive CSS grid helper
One
Two
Masonry / Default
masonry-defaultMulti-column CSS columns layout
SplitPane / Default
split-pane-defaultHorizontal split with resizable panels
ResizablePanel / Default
resizable-panel-defaultVertical panel group with resize handles
DockLayout / Default
dock-layout-defaultDock regions for app shells
PanelGroup / Default
panel-group-defaultVertical PanelGroup wrapper
PriceBadge / Default
price-badge-defaultCurrency, amount, and cadence display
PlanCard / Default
plan-card-defaultPricing card with features and CTA
Team
- SSO
- Audit log
FeatureList / Default
feature-list-defaultChecklist of plan features
- Exports
- Priority support
KpiGrid / Default
kpi-grid-defaultGrid of KPI tiles
MAU
12.4k
Churn
1.2%
FilterBar / Default
filter-bar-defaultToolbar row for filters and actions
MediaCard / Default
media-card-defaultMedia region with title and footer
Recording
Cover
AspectFrame / Default
aspect-frame-defaultFixed aspect container for media
ImagePlaceholder / Default
image-placeholder-defaultNeutral image placeholder block
VideoFrame / Default
video-frame-defaultResponsive video element styling
AudioRow / Default
audio-row-defaultTitle and inline audio controls
ScreenReaderText / Default
screen-reader-text-defaultAlias pattern for assistive-only text
Truncate / Default
truncate-defaultSingle-line ellipsis text
ClampText / Default
clamp-text-defaultMulti-line line-clamp paragraph
Long paragraph that clamps to a few lines when space is tight in the layout preview.
PortalHost / Default
portal-host-defaultDOM mount id for React portals
This story mounts a portal or overlay surface. Click to render it on demand.