Design System
Styleguide
  • Overview
  • Design tokens
  • Surface lab
  • Iconography
  • Guides
    • Design Principles
  • All components
  • AppShell studio
  • AppShell studio (SDL)
  • Workflow studio
  • System health
  • SDL
    • Reference
  • Actions
    • Island
    • Button
    • InsertionSeam
    • SplitButton
    • LinkButton
    • SegmentedControl
    • PickerBadge
    • FilterChip
    • QuickReplies
    • Composer
    • FilterBar
    • ToggleButton
    • ToggleGroup
    • Toolbar
    • Chip
    • DataTable
    • BatchActionBar
    • AlertDialog
    • DropdownMenu
    • ContextMenu
    • ConfirmDialog
    • confirm()
    • IconButton
    • CopyToClipboard
    • CopyButton
    • PageActions
    • ThemeToggleButton
  • Inputs
    • Input
    • Slider
    • NumberInput
    • OtpField
    • Dropzone
    • Attachment
    • Select
    • Combobox
    • DatePicker
    • TimeRangePicker
    • Textarea
    • Checkbox
    • CheckboxList
    • Switch
    • Label
    • Field
    • FieldGroup
    • FormField
    • FormRow
    • RowEditor
    • ColorPicker
    • ColorEditor
    • TagInput
    • UserPicker
    • Composer
    • ToggleButton
    • ToggleGroup
    • RadioGroup
    • RadioCard
    • Furnace Draw
  • Pickers & selection
    • Select
    • SegmentedControl
    • Picker
    • PickerBadge
    • Combobox
    • DatePicker
    • TimeRangePicker
    • CheckboxList
    • FilterChip
    • ColorPicker
    • ColorEditor
    • TagInput
    • UserPicker
    • AIInteraction
    • FilterBar
    • RadioGroup
    • RadioCard
    • PickerSheet
  • Form structure
    • Rating
    • AuthScreen
    • Input
    • Slider
    • NumberInput
    • OtpField
    • Textarea
    • Checkbox
    • Switch
    • Label
    • Field
    • Fieldset
    • FieldGroup
    • Form
    • FormField
    • FormRow
    • RowEditor
    • AIQuestionFlow
    • FormDialog
  • AI interactions
    • AIInteraction
    • AIQuestionFlow
    • QuickReplies
    • Composer
    • Avatar
    • AgentActivity
    • MessageBubble
    • Thinking
  • Navigation
    • AppShell
    • Sidebar
    • TopNavMobile
    • TopNav
    • NavMain
    • NavSecondary
    • Pagination
    • Tabs
    • TitleBackNav
    • AppLauncher
    • ContentBreadcrumb
    • LinkButton
    • NotFound
    • CommandPalette
    • TableOfContents
    • Carousel
    • TextLink
    • InternalLink
  • Menus & commands
    • TopNavMobile
    • TopNav
    • NavMain
    • NavSecondary
    • AppLauncher
    • SplitButton
    • DropdownMenu
    • ContextMenu
    • CommandPalette
    • NotificationBell
    • PageActions
  • Overlays
    • Picker
    • Toast
    • Toaster
    • Tooltip
    • AlertDialog
    • Dialog
    • Lightbox
    • Drawer
    • Sheet
    • PickerSheet
    • DropdownMenu
    • ContextMenu
    • PreviewCard
    • CommandPalette
    • FormDialog
    • ConfirmDialog
    • confirm()
    • Falcata ID settings pieces
    • TargetOutline
    • AnchoredPanel
    • PhotoGrid
  • Status & feedback
    • PickerBadge
    • Badge
    • Chip
    • StatusDot
    • TrendBadge
    • AgentActivity
    • Alert
    • Empty
    • Spinner
    • Progress
    • Meter
    • Thinking
    • Toast
    • Toaster
    • Tooltip
    • BatchActionBar
    • AppLoading
    • NotFound
    • AccessGate
    • SignInPrompt
    • AlertBanner
    • Sound effects
    • NotificationBell
    • IconContainer
    • ErrorBoundary
    • Callout
  • Loading & progress
    • Spinner
    • Progress
    • Thinking
    • Skeleton
    • AppLoading
    • FadeImage
  • Data & tables
    • Item
    • List
    • Pagination
    • PickerBadge
    • Sortable
    • TaskBoard
    • Badge
    • Chip
    • StatusDot
    • JsonTreeView
    • Kbd
    • Avatar
    • AvatarGroup
    • LogsDisplay
    • DataTable
    • Table
    • BarList
    • BarChart
    • Heatmap
    • MultiSeriesLine
    • AreaChart
    • ItemMeta
    • GraphViewer
    • Sparkline
    • StatCard
    • Odometer
    • TimeDisplay
    • AgentActivity
    • MessageBubble
    • Checklist
    • Timeline
  • Charts
    • BarList
    • BarChart
    • Heatmap
    • MultiSeriesLine
    • AreaChart
    • GraphViewer
    • Sparkline
    • StatCard
    • TrendBadge
    • Workflow
  • Text & content
    • JsonTreeView
    • Kbd
    • LogsDisplay
    • ItemMeta
    • TimeDisplay
    • Truncate
    • Text & Heading
    • Markdown
    • CodeBlock
    • Callout
    • TableOfContents
    • TextLink
    • InternalLink
  • Media
    • Card
    • Dropzone
    • Attachment
    • Avatar
    • AvatarGroup
    • Furnace Draw
    • AudioPlayer
    • AudioRecorderWaveform
    • Waveform
    • Sound effects
    • AudioRecorderButton
    • Lightbox
    • FadeImage
    • ProtectedImage
    • ProtectedVideo
    • MediaImage
    • PhotoGrid
    • Carousel
    • YouTubeEmbed
  • Layout & structure
    • AppShell
    • Card
    • Section
    • Island
    • Sidebar
    • ScrollArea
    • LayoutMinimap
    • Rule
    • Separator
    • Tailpiece
    • Item
    • List
    • Grid
    • PageGrid
    • StatGrid
    • Split
    • SplitPane
    • MasterDetail
    • Workspace
    • DashboardGrid
    • Wrap
    • Collapsible
    • PageContainer
    • Tabs
    • Fieldset
    • FormRow
    • Toolbar
    • Sortable
    • TaskBoard
    • Table
    • ScrollFade
  • Assemblies
    • Workspace
    • TaskBoard
  • Workflows & diagrams
    • AIQuestionFlow
    • GraphViewer
    • Checklist
    • Furnace Draw
    • Workflow
    • Workflow Node
    • Workflow Sections
    • Workflow Data Flow
    • Workflow Ports
    • Workflow Builder
    • Workflow Collab
    • Automation
  • Utilities
    • ScrollArea
    • AccessGate
    • SignInPrompt
    • Icon
    • IconContainer
    • IconButton
    • CopyToClipboard
    • CopyButton
    • ErrorBoundary
    • ThemeProvider
    • VisuallyHidden
    • Presence
    • Truncate
    • ScrollFade
    • Reveal
    • FadeImage
    • ThemeToggleButton

A modern, AI-ready, full-stack design system for rich application experiences.

Compose production apps from accessible React components, shared tokens, and server-driven patterns.

Browse componentsDesign tokens

Customize

Customize the identity and decide what the live specimen includes.


Pick a color

Start with Paul Tol’s vibrant palette or create your own accessible accent.


Applied through SDL theme.accent. The rest of the page is unaffected.


Under the hood

See the structure behind this live preview.

ER

Ellen Ripley

Warrant officer · Nostromo

Active
Log entries
128+12.4%
Hours logged
648+8.1%
Cargo capacity

72%

Systems

Click Sync again while the toast is open to see the dedupe pulse.

NewestAnchoredPanelstablestable

A non-modal panel that stays anchored or docks at the bottom.

View component
Recently updatedBatchActionBarstableUpdated yesterday

Add a PageBottomDock slot and migrate media-library onto declared seams

View component
Components
147of 157 in use
Design tokens
88of 132 in use
Apps served
33across Furnace
Adoption
80%system-wide

Most used

Browse all 181 components
  • Button
    581instances in use
  • Badge
    231instances in use
  • Card
    202instances in use
  • FormField
    175instances in use
  • Input
    172instances in use
  • Spinner
    136instances in use
  • Empty
    115instances in use
  • Alert
    109instances in use