Skip to content
Navigation — Component Gallery
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

Navigation — Component Gallery

Accordion

Accordion Behaviors

BasicMultipleDisabled Items
Basic
View DSL Source 
stack(gap="xs")
  panel(label="Security Settings" open=true)
    stack(gap="md")
      checkbox Enable Two-Factor Authentication
      checkbox Log out of all devices
  panel(label="Privacy Preferences")
    placeholder(type="text")
  panel(label="Data & Storage")
    placeholder(type="text")
Multiple
View DSL Source 
stack(gap="xs")
  panel(label="Notifications" open=true)
    placeholder(type="text")
  panel(label="Theme Customization" open=true)
    placeholder(type="text")
  panel(label="Advanced Options")
    placeholder(type="text")
Disabled Items
View DSL Source 
stack(gap="xs")
  panel(label="System Status (Locked)" disabled=true)
  panel(label="Diagnostics")
    placeholder(type="text")

Details Appearance

Appearance
Appearance
View DSL Source 
stack(gap="sm")
  details(summary="Outlined" appearance="outlined")
    text Outlined appearance.
  details(summary="Filled" appearance="filled")
    text Filled appearance.
  details(summary="Plain" appearance="plain")
    text Plain appearance.

Breadcrumb

Breadcrumb Basic

BasicWith IconsSeparator
Basic
View DSL Source 
breadcrumb
  breadcrumb-item(href="/") Home
  breadcrumb-item(href="/products") Products
  breadcrumb-item(href="/products/clothing") Clothing
  breadcrumb-item Current Item
With Icons
View DSL Source 
breadcrumb
  breadcrumb-item(href="/")
    icon(slot="start" name="house")
    | Home
  breadcrumb-item(href="/settings")
    icon(slot="start" name="gear")
    | Settings
  breadcrumb-item
    icon(slot="start" name="user")
    | Profile
Separator
View DSL Source 
breadcrumb
  icon(slot="separator" name="chevron-right" variant="solid")
  breadcrumb-item(href="/") Home
  breadcrumb-item(href="/docs") Documentation
  breadcrumb-item(href="/docs/components") Components
  breadcrumb-item Breadcrumb

Dialog

Modal & Dialog

StandardAlert DialogNative AlertInline Sheet
Standard
View DSL Source 
modal(title="Edit Information" size="md" modal=false)
  stack(gap="md")
    input(label="Name" value="John Doe")
    row(justify="end")
      button(variant="primary") Save
Alert Dialog
View DSL Source 
modal(title="Delete Project?" variant="alert" size="sm" modal=false)
  stack(gap="md")
    text This action is permanent and cannot be undone.
    row(justify="end" gap="sm")
      button(variant="ghost") Cancel
      button(variant="danger") Delete
Native Alert
View DSL Source 
modal(title="Permission Required" native=true modal=false)
  text Allow "StarSpec" to access your location while using the app?
Inline Sheet
View DSL Source 
modal(title="Quick Settings" modal=false)
  stack(gap="md")
    checkbox(checked) Enable notifications
    checkbox Dark mode

Dialog Basic

BasicNo Header
Basic
View DSL Source 
dialog(title="Confirm Action" open)
  text Are you sure you want to proceed?
No Header
View DSL Source 
dialog(open without-header)
  text Content without a header bar.

Drawer

Drawer End

EndStartTop
End
View DSL Source 
drawer(label="Settings" placement="end")
  text Content goes here.
Start
View DSL Source 
drawer(label="Navigation" placement="start")
  text Sidebar content.
Top
View DSL Source 
drawer(label="Notification" placement="top")
  text Top banner content.

Dropdown

Dropdown Basic

BasicItem Variants
Basic
View DSL Source 
dropdown
  button(slot="trigger" with-caret) Options
  dropdown-item(value="1") Option 1
  dropdown-item(value="2") Option 2
  dropdown-item(value="3") Option 3
Item Variants
View DSL Source 
dropdown
  button(slot="trigger" with-caret) Actions
  dropdown-item(value="edit") Edit
  dropdown-item(value="dupe") Duplicate
  dropdown-item(type="checkbox" checked value="pin") Pinned
  dropdown-item(value="delete" variant="danger") Delete

Dropdown-item

Dropdown Item Types

TypesDisabled
Types
View DSL Source 
dropdown
  button(slot="trigger" with-caret) Options
  dropdown-item(value="normal") Normal item
  dropdown-item(value="check" type="checkbox" checked) Checkbox (checked)
  dropdown-item(value="uncheck" type="checkbox") Checkbox (unchecked)
  dropdown-item(value="danger" variant="danger") Danger item
Disabled
View DSL Source 
dropdown
  button(slot="trigger" with-caret) Actions
  dropdown-item(value="edit") Edit
  dropdown-item(value="move" disabled) Move (disabled)
  dropdown-item(value="delete" variant="danger") Delete

Nav

Navigation Types

Top BarSidebarBreadcrumb
Top Bar
View DSL Source 
nav(type="top" brand="StarSpec App" search=true)
  link(label="Dashboard" active=true)
  link(label="UIs" count=12)
  link(label="Settings")
Sidebar
View DSL Source 
nav(type="side")
  link(label="Home" icon="home" active=true)
  link(label="Projects" icon="folder")
  link(label="Teams" icon="users")
  link(label="Profile" icon="user")
Breadcrumb
View DSL Source 
nav(type="breadcrumb")
  link(label="Home")
  link(label="Projects")
  link(label="AI Spectacular" active=true)

Pagination

Pagination — Basic

BasicMid-pageLast pageSmallCompactWith table
Basic
View DSL Source 
pagination(total=84 page=1 per-page=10)
Mid-page
View DSL Source 
pagination(total=200 page=5 per-page=10)
Last page
View DSL Source 
pagination(total=84 page=9 per-page=10)
Small
View DSL Source 
pagination(total=150 page=3 per-page=15 size="small")
Compact
View DSL Source 
pagination(total=84 page=4 per-page=10 compact=true)
With table
View DSL Source 
stack(gap="md")
  table(rows="5" striped=true)
    column(label="Name")
    column(label="Status" width="20%")
    column(label="Date" width="25%")
  pagination(total=84 page=1 per-page=5)

Stepper

Stepper Flow

InitialVerticalIn ProgressCompleted
Initial
View DSL Source 
stack(align="center")
  stepper
    step(label="Account" status="active" description="Basic details")
      placeholder(label="Account Form")
    step(label="Profile" status="pending" description="Personal info")
    step(label="Review" status="pending")
Vertical
View DSL Source 
stack(align="center")
  stepper(orientation="vertical")
    step(label="Account" status="active" description="Basic details")
      placeholder(label="Account Form")
    step(label="Profile" status="pending" description="Personal info")
    step(label="Review" status="pending")
In Progress
View DSL Source 
stack(align="center")
  stepper
    step(label="Account" status="completed")
    step(label="Profile" status="active" description="Personal info")
      stack(gap="md")
        input(label="Display Name")
        textarea(label="Bio")
    step(label="Review" status="pending")
Completed
View DSL Source 
stack(align="center")
  stepper
    step(label="Account" status="completed")
    step(label="Profile" status="completed")
    step(label="Review" status="completed")
      alert(variant="success" title="Ready to Go" message="All steps finished.")

Tab-group

Tab Group Basic

BasicVerticalDisabled
Basic
View DSL Source 
tabs(label="Settings")
  tab(label="General") General content goes here.
  tab(label="Privacy") Privacy settings go here.
  tab(label="Advanced") Advanced options go here.
Vertical
View DSL Source 
tabs(label="Navigation" placement="start")
  tab(label="Overview") Overview content.
  tab(label="Details") Details content.
  tab(label="History") History content.
Disabled
View DSL Source 
tabs(label="Example")
  tab(label="Active") Active tab content.
  tab(label="Another") Another tab content.
  tab(label="Disabled" disabled) This tab is disabled.

Tree

Tree Basic

BasicWith IconsSelection
Basic
View DSL Source 
tree(style="--indent-guide-width:1px")
  tree-item(expanded) Deciduous
    tree-item Birch
    tree-item(expanded) Maple
      tree-item Field maple
      tree-item Red maple
      tree-item Sugar maple
    tree-item Oak
    tree-item Walnut
  tree-item Coniferous
    tree-item Cedar
    tree-item(expanded) Pine
      tree-item Eastern white pine
      tree-item Scots pine
    tree-item Spruce
  tree-item Tropical
    tree-item Banyan
    tree-item Mahogany
    tree-item Teak
With Icons
View DSL Source 
tree(style="--indent-guide-width:1px")
  tree-item(expanded icon="folder") Documents
    tree-item(expanded icon="folder") Photos
      tree-item(icon="image") vacation.jpg
      tree-item(icon="image") family-portrait.png
      tree-item(icon="image") sunset.jpg
    tree-item(expanded icon="folder") Work
      tree-item(icon="file-pdf") quarterly-report.pdf
      tree-item(icon="file-lines") budget.xls
      tree-item(icon="file") meeting-notes.txt
    tree-item(icon="folder") Personal
      tree-item(icon="file") journal.txt
      tree-item(icon="file-pdf") resume.pdf
  tree-item(icon="folder") Downloads
    tree-item(icon="file-zipper") archive.zip
    tree-item(icon="file") readme.txt
Selection
View DSL Source 
row(gap="xl" align="start")
  stack(gap="xs")
    text(style="color:var(--wa-color-text-subtle)") single
    tree(selection="single")
      tree-item(expanded) Electronics
        tree-item Laptops
        tree-item Desktops
        tree-item Tablets
      tree-item Clothing
        tree-item Shirts
        tree-item Shoes
  stack(gap="xs")
    text(style="color:var(--wa-color-text-subtle)") multiple
    tree(selection="multiple")
      tree-item(expanded) Electronics
        tree-item Laptops
        tree-item Desktops
        tree-item Tablets
      tree-item Clothing
        tree-item Shirts
        tree-item Shoes
  stack(gap="xs")
    text(style="color:var(--wa-color-text-subtle)") leaf
    tree(selection="leaf")
      tree-item(expanded) Electronics
        tree-item Laptops
        tree-item Desktops
        tree-item Tablets
      tree-item Clothing
        tree-item Shirts
        tree-item Shoes
DSL Reference