Layout — Component Gallery

Card

Card — Variants

Variants

Default

Default Card

Flat border, no shadow.

Action

Elevated

Elevated Card

Offset shadow for visual lift.

Action

View DSL Source

row(gap="lg" align="start")
  stack(gap="xs")
    badge(variant="neutral") Default
    card
      stack(gap="sm")
        heading(level="2") Default Card
        text Flat border, no shadow.
        button(variant="secondary") Action
  stack(gap="xs")
    badge(variant="neutral") Elevated
    card(elevated=true)
      stack(gap="sm")
        heading(level="2") Elevated Card
        text Offset shadow for visual lift.
        button(variant="primary") Action

Card Appearance

Appearance

Orientation

Appearance

Outlined

Filled

Plain

Accent

View DSL Source

row(gap="md" align="start")
  card(appearance="outlined")
    text Outlined
  card(appearance="filled")
    text Filled
  card(appearance="plain")
    text Plain
  card(appearance="accent")
    text Accent

Orientation

Vertical card

Horizontal card

View DSL Source

stack(gap="md")
  card(orientation="vertical")
    text Vertical card
  card(orientation="horizontal")
    text Horizontal card

Divider

Divider Horizontal

Horizontal

Vertical

Horizontal

Above the line

Below the line

View DSL Source

stack(gap="md")
  text Above the line
  divider
  text Below the line

Vertical

Left

Right

View DSL Source

row(gap="md" align="center")
  text Left
  divider(orientation="vertical")
  text Right

Grid

Grid — Column Counts

Columns

Content

Columns

cols="1"

cols="2"

cols="3"

cols="4"

View DSL Source

stack(gap="xl")
  stack(gap="xs")
    badge(variant="neutral") cols="1"
    grid(cols="1" gap="md")
      placeholder(label="1" height="60px")
      placeholder(label="2" height="60px")
      placeholder(label="3" height="60px")
  stack(gap="xs")
    badge(variant="neutral") cols="2"
    grid(cols="2" gap="md")
      placeholder(label="1" height="60px")
      placeholder(label="2" height="60px")
      placeholder(label="3" height="60px")
      placeholder(label="4" height="60px")
  stack(gap="xs")
    badge(variant="neutral") cols="3"
    grid(cols="3" gap="md")
      placeholder(label="1" height="60px")
      placeholder(label="2" height="60px")
      placeholder(label="3" height="60px")
      placeholder(label="4" height="60px")
      placeholder(label="5" height="60px")
      placeholder(label="6" height="60px")
  stack(gap="xs")
    badge(variant="neutral") cols="4"
    grid(cols="4" gap="md")
      placeholder(label="1" height="60px")
      placeholder(label="2" height="60px")
      placeholder(label="3" height="60px")
      placeholder(label="4" height="60px")

Content

2-column feature cards

Profile

Manage your personal details.

Settings

App preferences and defaults.

Memory

Search past conversations.

Export

Download your data.

3-column stat dashboard

Sessions

24

Insights

12

Unresolved

3

View DSL Source

stack(gap="xl")
  stack(gap="xs")
    text(color="muted") 2-column feature cards
    grid(cols="2" gap="md")
      card(elevated=true)
        stack(gap="xs")
          icon(name="user" size="md")
          heading(level="2") Profile
          text Manage your personal details.
      card(elevated=true)
        stack(gap="xs")
          icon(name="settings" size="md")
          heading(level="2") Settings
          text App preferences and defaults.
      card(elevated=true)
        stack(gap="xs")
          icon(name="search" size="md")
          heading(level="2") Memory
          text Search past conversations.
      card(elevated=true)
        stack(gap="xs")
          icon(name="download" size="md")
          heading(level="2") Export
          text Download your data.

  stack(gap="xs")
    text(color="muted") 3-column stat dashboard
    grid(cols="3" gap="md")
      card
        stack(gap="xs")
          text(color="muted") Sessions
          heading(level="1") 24
      card
        stack(gap="xs")
          text(color="muted") Insights
          heading(level="1") 12
      card
        stack(gap="xs")
          text(color="muted") Unresolved
          heading(level="1") 3

Phone-shell

Phone Shell — iPhone

iPhone 16 Pro

Pixel 9

Galaxy S24

iPhone 16 Pro

Name	Email	Role

phone-shell(phone="iphone16pro")
  stack(gap="md")
    input(label="Search" placeholder="Search...")
    table
      column(label="Name")
      column(label="Email")
      column(label="Role")
    button(variant="primary") Next

Pixel 9

Settings

item
item
item

View DSL Source

phone-shell(phone="pixel9")
  stack(gap="md")
    heading(level="2") Settings
    list
      text Notifications
      text Privacy
      text Display
      text Battery

Galaxy S24

item
item
item

View DSL Source

phone-shell(phone="galaxys24")
  nav(type="top") Messages
  list
    text Alice Johnson
    text Bob Smith
    text Carol Williams

Row

Row — Justify

Justify

Align

Patterns

Justify

justify="start" (default)

justify="center"

justify="end"

justify="between"

View DSL Source

stack(gap="lg")
  stack(gap="xs")
    badge(variant="neutral") justify="start" (default)
    row(justify="start" gap="md")
      placeholder(label="A" width="80px" height="40px")
      placeholder(label="B" width="80px" height="40px")
      placeholder(label="C" width="80px" height="40px")
  stack(gap="xs")
    badge(variant="neutral") justify="center"
    row(justify="center" gap="md")
      placeholder(label="A" width="80px" height="40px")
      placeholder(label="B" width="80px" height="40px")
      placeholder(label="C" width="80px" height="40px")
  stack(gap="xs")
    badge(variant="neutral") justify="end"
    row(justify="end" gap="md")
      placeholder(label="A" width="80px" height="40px")
      placeholder(label="B" width="80px" height="40px")
      placeholder(label="C" width="80px" height="40px")
  stack(gap="xs")
    badge(variant="neutral") justify="between"
    row(justify="between" gap="md")
      placeholder(label="A" width="80px" height="40px")
      placeholder(label="B" width="80px" height="40px")
      placeholder(label="C" width="80px" height="40px")

Align

align="start"

align="center" (default)

align="end"

align="stretch"

View DSL Source

stack(gap="lg")
  stack(gap="xs")
    badge(variant="neutral") align="start"
    row(align="start" gap="md")
      placeholder(label="Tall" width="80px" height="80px")
      placeholder(label="Short" width="80px" height="40px")
      placeholder(label="Medium" width="80px" height="60px")
  stack(gap="xs")
    badge(variant="neutral") align="center" (default)
    row(align="center" gap="md")
      placeholder(label="Tall" width="80px" height="80px")
      placeholder(label="Short" width="80px" height="40px")
      placeholder(label="Medium" width="80px" height="60px")
  stack(gap="xs")
    badge(variant="neutral") align="end"
    row(align="end" gap="md")
      placeholder(label="Tall" width="80px" height="80px")
      placeholder(label="Short" width="80px" height="40px")
      placeholder(label="Medium" width="80px" height="60px")
  stack(gap="xs")
    badge(variant="neutral") align="stretch"
    row(align="stretch" gap="md")
      placeholder(label="Tall" width="80px" height="80px")
      placeholder(label="Short" width="80px")
      placeholder(label="Medium" width="80px")

Patterns

Page header with title + action

Conversations

New Session

Label + badge status row

Transcription

Active

Sync

Pending

AI Analysis

Off

Icon + text label row

Alex

April 27, 2026

Open Sharing · 5 min

Button group row

Cancel

Save Draft

Publish

View DSL Source

stack(gap="lg")
  stack(gap="xs")
    text(color="muted") Page header with title + action
    card
      row(justify="between" align="center")
        heading(level="1") Conversations
        button(variant="primary") New Session

  stack(gap="xs")
    text(color="muted") Label + badge status row
    card
      stack(gap="sm")
        row(justify="between" align="center")
          text Transcription
          badge(variant="success") Active
        row(justify="between" align="center")
          text Sync
          badge(variant="warning") Pending
        row(justify="between" align="center")
          text AI Analysis
          badge(variant="neutral") Off

  stack(gap="xs")
    text(color="muted") Icon + text label row
    card
      stack(gap="sm")
        row(gap="sm" align="center")
          icon(name="user" size="sm")
          text Alex
        row(gap="sm" align="center")
          icon(name="calendar" size="sm")
          text April 27, 2026
        row(gap="sm" align="center")
          icon(name="info" size="sm")
          text Open Sharing · 5 min

  stack(gap="xs")
    text(color="muted") Button group row
    row(gap="sm")
      button(variant="ghost") Cancel
      button(variant="secondary") Save Draft
      button(variant="primary") Publish

Scroller

Scroller Horizontal

Horizontal

Vertical

No Shadow

Horizontal

Dashboard

Overview & KPIs

Analytics

Traffic & events

Reports

Export & schedule

Users

Accounts & roles

Settings

Config & tokens

Billing

Plans & invoices

View DSL Source

scroller
  row(gap="md" style="width:max-content")
    card(style="width:180px")
      heading(level="4") Dashboard
      text(muted="true") Overview & KPIs
    card(style="width:180px")
      heading(level="4") Analytics
      text(muted="true") Traffic & events
    card(style="width:180px")
      heading(level="4") Reports
      text(muted="true") Export & schedule
    card(style="width:180px")
      heading(level="4") Users
      text(muted="true") Accounts & roles
    card(style="width:180px")
      heading(level="4") Settings
      text(muted="true") Config & tokens
    card(style="width:180px")
      heading(level="4") Billing
      text(muted="true") Plans & invoices

Vertical

January

Revenue up 12% — strong product launches drove growth across all regions.

February

Slight dip in signups offset by improved retention from onboarding changes.

March

Record quarter — new enterprise tier released, 3 major contracts signed.

April

Infrastructure migration complete. Downtime reduced by 40%.

May

Mobile app hit 10k installs. iOS ratings climbed to 4.7 stars.

June

Mid-year review: team grew by 8, roadmap reprioritized for Q3.

View DSL Source

scroller(orientation="vertical" style="max-height:280px")
  stack(gap="sm")
    card
      heading(level="4") January
      text(muted="true") Revenue up 12% — strong product launches drove growth across all regions.
    card
      heading(level="4") February
      text(muted="true") Slight dip in signups offset by improved retention from onboarding changes.
    card
      heading(level="4") March
      text(muted="true") Record quarter — new enterprise tier released, 3 major contracts signed.
    card
      heading(level="4") April
      text(muted="true") Infrastructure migration complete. Downtime reduced by 40%.
    card
      heading(level="4") May
      text(muted="true") Mobile app hit 10k installs. iOS ratings climbed to 4.7 stars.
    card
      heading(level="4") June
      text(muted="true") Mid-year review: team grew by 8, roadmap reprioritized for Q3.

No Shadow

Design

Engineering

Product

Legal

Finance

Operations

Support

Marketing

Security

Data

DevRel

Research

View DSL Source

scroller(without-shadow="true")
  row(gap="md" style="width:max-content")
    badge(variant="brand") Design
    badge(variant="success") Engineering
    badge(variant="warning") Product
    badge(variant="danger") Legal
    badge(variant="neutral") Finance
    badge(variant="brand") Operations
    badge(variant="success") Support
    badge(variant="warning") Marketing
    badge(variant="danger") Security
    badge(variant="neutral") Data
    badge(variant="brand") DevRel
    badge(variant="success") Research

Section

Section — Basic

Basic

Titled

Basic

My Screen

This is the page content.

Action

View DSL Source

section
  stack(gap="md")
    heading(level="1") My Screen
    text This is the page content.
    button(variant="primary") Action

Titled

Dashboard

Annotated with a title in the border notch — useful when multiple sections are stacked.

View DSL Source

section(title="Dashboard")
  stack(gap="md")
    heading(level="1") Dashboard
    text Annotated with a title in the border notch — useful when multiple sections are stacked.

Stack

Stack — Gap Scale

Gaps

Align

Content

Gaps

gap="xs"

gap="sm"

gap="md"

gap="lg"

gap="xl"

View DSL Source

row(gap="lg" align="start")
  stack(gap="xs")
    badge(variant="neutral") gap="xs"
    placeholder(label="A" width="120px" height="40px")
    placeholder(label="B" width="120px" height="40px")
    placeholder(label="C" width="120px" height="40px")
  stack(gap="sm")
    badge(variant="neutral") gap="sm"
    placeholder(label="A" width="120px" height="40px")
    placeholder(label="B" width="120px" height="40px")
    placeholder(label="C" width="120px" height="40px")
  stack(gap="md")
    badge(variant="neutral") gap="md"
    placeholder(label="A" width="120px" height="40px")
    placeholder(label="B" width="120px" height="40px")
    placeholder(label="C" width="120px" height="40px")
  stack(gap="lg")
    badge(variant="neutral") gap="lg"
    placeholder(label="A" width="120px" height="40px")
    placeholder(label="B" width="120px" height="40px")
    placeholder(label="C" width="120px" height="40px")
  stack(gap="xl")
    badge(variant="neutral") gap="xl"
    placeholder(label="A" width="120px" height="40px")
    placeholder(label="B" width="120px" height="40px")
    placeholder(label="C" width="120px" height="40px")

Align

align="start"

align="center"

align="end"

align="stretch" (default)

View DSL Source

row(gap="xl" align="start")
  stack(gap="md" align="start")
    badge(variant="neutral") align="start"
    placeholder(label="Narrow" width="80px" height="40px")
    placeholder(label="Wide" width="160px" height="40px")
    placeholder(label="Medium" width="120px" height="40px")
  stack(gap="md" align="center")
    badge(variant="neutral") align="center"
    placeholder(label="Narrow" width="80px" height="40px")
    placeholder(label="Wide" width="160px" height="40px")
    placeholder(label="Medium" width="120px" height="40px")
  stack(gap="md" align="end")
    badge(variant="neutral") align="end"
    placeholder(label="Narrow" width="80px" height="40px")
    placeholder(label="Wide" width="160px" height="40px")
    placeholder(label="Medium" width="120px" height="40px")
  stack(gap="md" align="stretch")
    badge(variant="neutral") align="stretch" (default)
    placeholder(label="A" height="40px")
    placeholder(label="B" height="40px")
    placeholder(label="C" height="40px")

Content

Account Settings

Manage your profile and preferences.

Profile

Display name

Alex

Notifications

Push notifications

On

Save Changes

View DSL Source

stack(gap="lg")
  stack(gap="xs")
    heading(level="1") Account Settings
    text(color="muted") Manage your profile and preferences.
  stack(gap="md")
    card(elevated=true)
      stack(gap="sm")
        heading(level="2") Profile
        row(justify="between" align="center")
          text Display name
          badge(variant="neutral") Alex
    card(elevated=true)
      stack(gap="sm")
        heading(level="2") Notifications
        row(justify="between" align="center")
          text Push notifications
          badge(variant="success") On
  button(variant="primary" width="full") Save Changes