Shells — Component Gallery

Form-shell

Combinations — Form Shell

Form

Create Account

Fill in the details below to get started.

Forgot password?

Sign Up

Already have an account?

Sign in

View DSL Source

section
  stack(gap="lg")
    stack(gap="xs")
      heading(level="1") Create Account
      text(color="muted") Fill in the details below to get started.
    card(elevated=true)
      stack(gap="md")
        input(label="Full name" placeholder="e.g. Alex Kim" required)
        input(label="Email" type="email" placeholder="you@example.com" required)
        input(label="Password" type="password" required)
        row(justify="between" align="center")
          checkbox(label="Remember me")
          button(variant="ghost") Forgot password?
        button(variant="primary" width="full") Sign Up
    row(justify="center")
      text Already have an account?
      button(variant="ghost") Sign in

List

Combinations — List + Detail Header

List

Sessions

12 total

Open Sharing

April 27 · 5 min

Unresolved

Conflict Resolution

April 20 · 18 min

Resolved

Topic Exploration

April 14 · 22 min

Draft

View DSL Source

section
  stack(gap="md")
    row(justify="between" align="center")
      heading(level="1") Sessions
      badge(variant="neutral") 12 total
    input(label="Search" type="search" placeholder="Search sessions…")
    stack(gap="sm")
      card(elevated=true)
        row(justify="between" align="center")
          stack(gap="xs")
            text(weight="bold") Open Sharing
            text(color="muted") April 27 · 5 min
          badge(variant="warning") Unresolved
      card(elevated=true)
        row(justify="between" align="center")
          stack(gap="xs")
            text(weight="bold") Conflict Resolution
            text(color="muted") April 20 · 18 min
          badge(variant="success") Resolved
      card(elevated=true)
        row(justify="between" align="center")
          stack(gap="xs")
            text(weight="bold") Topic Exploration
            text(color="muted") April 14 · 22 min
          badge(variant="neutral") Draft

Screen-shell

Combinations — Screen Shell

Screen Shell

Screen Title

Primary Section

Main content goes here.

Primary Action

Secondary Section

Supporting content.

Secondary Action

View DSL Source

section
  stack(gap="lg")
    row(justify="between" align="center")
      heading(level="1") Screen Title
      icon(name="settings" size="md")
    card(elevated=true)
      stack(gap="md")
        heading(level="2") Primary Section
        text Main content goes here.
        button(variant="primary" width="full") Primary Action
    card
      stack(gap="sm")
        heading(level="2") Secondary Section
        text Supporting content.
        button(variant="ghost" width="full") Secondary Action

Settings-shell

Combinations — Settings Shell

Settings

Preferences

Default visibility

Controls new note visibility

Private

Shared

Push notifications

Session reminders

Reminder time

Daily preferred time

8:00 AM

Save Changes

View DSL Source

section
  stack(gap="lg")
    heading(level="1") Settings
    card(elevated=true)
      stack(gap="md")
        heading(level="2") Preferences
        divider
        row(justify="between" align="center")
          stack(gap="xs")
            text(weight="bold") Default visibility
            text(color="muted") Controls new note visibility
          segmented(label="Visibility" options="Private,Shared" value="Private")
        row(justify="between" align="center")
          stack(gap="xs")
            text(weight="bold") Push notifications
            text(color="muted") Session reminders
          checkbox(label="Enabled")
        row(justify="between" align="center")
          stack(gap="xs")
            text(weight="bold") Reminder time
            text(color="muted") Daily preferred time
          badge(variant="neutral") 8:00 AM
    button(variant="primary" width="full") Save Changes