Design System
Styleguide
  • Overview
  • Design tokens
  • Surface lab
  • Iconography
  • Guides
    • Design Principles
  • All components
  • AppShell studio
  • Workflow studio
  • System health
  • SDL
    • Reference
    • Dashboard
    • Settings
    • Playground
  • Actions
    • Island
    • Button
    • SplitButton
    • LinkButton
    • SegmentedControl
    • 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
    • Combobox
    • DatePicker
    • TimeRangePicker
    • CheckboxList
    • FilterChip
    • ColorPicker
    • ColorEditor
    • TagInput
    • UserPicker
    • AIInteraction
    • FilterBar
    • RadioGroup
    • RadioCard
    • PickerSheet
  • Form structure
    • 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
    • PhotoGrid
  • Status & feedback
    • 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
    • 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
    • StatGrid
    • Split
    • SplitPane
    • Wrap
    • Collapsible
    • PageContainer
    • Tabs
    • Fieldset
    • FormRow
    • Toolbar
    • Sortable
    • TaskBoard
    • Table
    • ScrollFade
  • 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.

Ellen Ripley · 5 of 5 sections

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.

NewestJsonTreeViewexperimentalexperimental · v0.1.0

Expandable JSON tree with syntax highlighting.

View component
Components
172in the library
Design tokens
121phi-based scale

Most used

Browse all 172 components