App — Component Gallery

Action-panel

Action Panel

Quick Actions

New Item

Import

Export

Delete Selected

View DSL Source

card(elevated=true)
  stack(gap="md")
    heading(level="2") Quick Actions
    stack(gap="sm")
      button(variant="primary" width="full" icon="plus") New Item
      button(variant="secondary" width="full" icon="upload") Import
      button(variant="secondary" width="full" icon="download") Export
      button(variant="ghost" width="full" icon="trash") Delete Selected

Activity-log

Activity Log

Recent Activity

24 events

Invoice #1042 approved

2 min ago

New comment on Project Alpha

18 min ago

User Jana joined the team

1 hr ago

Settings updated

Yesterday

View DSL Source

card(elevated=true)
  stack(gap="md")
    row(justify="between" align="center")
      heading(level="2") Recent Activity
      badge(variant="neutral") 24 events
    timeline
      timeline-item(label="Invoice #1042 approved" description="2 min ago" icon="check" status="completed")
      timeline-item(label="New comment on Project Alpha" description="18 min ago" icon="info" status="completed")
      timeline-item(label="User Jana joined the team" description="1 hr ago" icon="user" status="completed")
      timeline-item(label="Settings updated" description="Yesterday" icon="settings" status="completed")

Comments

Maria K.

10 min ago

Looks good to me. One small note on section 3 though.

Tom R.

1 hr ago

Agreed. I'll update the draft today.

Post

View DSL Source

card(elevated=true)
  stack(gap="lg")
    heading(level="2") Comments
    stack(gap="md")
      card
        stack(gap="xs")
          row(justify="between" align="center")
            text(weight="bold") Maria K.
            text(color="muted") 10 min ago
          text Looks good to me. One small note on section 3 though.
      card
        stack(gap="xs")
          row(justify="between" align="center")
            text(weight="bold") Tom R.
            text(color="muted") 1 hr ago
          text Agreed. I'll update the draft today.
    stack(gap="sm")
      textarea(label="Add a comment" placeholder="Write something…")
      row(justify="end")
        button(variant="primary") Post

Data-display

Data Display

Revenue

$84,200

↑ +12%

Active Users

3,410

↑ +5%

Churn

1.8%

↓ -0.3%

Revenue over 30 days

View DSL Source

stack(gap="md")
  grid(cols="3" gap="md")
    stat-card(label="Revenue" value="$84,200" trend="+12%" direction="up")
    stat-card(label="Active Users" value="3,410" trend="+5%" direction="up")
    stat-card(label="Churn" value="1.8%" trend="-0.3%" direction="down")
  card(elevated=true)
    chart(type="area" label="Revenue over 30 days")

Empty-state

Empty State

No results found

Try adjusting your filters or start fresh.

Clear Filters

View DSL Source

card(elevated=true)
  stack(gap="md" align="center")
    icon(name="search" size="3em")
    heading(level="2") No results found
    text(color="muted") Try adjusting your filters or start fresh.
    button(variant="primary") Clear Filters

Password

Change Password

Use at least 12 characters with a mix of letters, numbers, and symbols.

Cancel

Update Password

View DSL Source

card(elevated=true)
  stack(gap="lg")
    heading(level="2") Change Password
    stack(gap="md")
      input(label="Current password" type="password" required)
      input(label="New password" type="password" required)
      input(label="Confirm new password" type="password" required)
    alert(variant="info" message="Use at least 12 characters with a mix of letters, numbers, and symbols.")
    row(justify="end" gap="sm")
      button(variant="ghost") Cancel
      button(variant="primary") Update Password

Permissions

Role Permissions

Feature	Viewer	Editor	Admin

Save Changes

View DSL Source

card(elevated=true)
  stack(gap="md")
    heading(level="2") Role Permissions
    table(rows="4" striped=true)
      column(label="Feature" width="40%")
      column(label="Viewer" width="20%" align="center")
      column(label="Editor" width="20%" align="center")
      column(label="Admin" width="20%" align="center")
    row(justify="end")
      button(variant="primary") Save Changes