Renders a single collapsible section on <details>, with a button as the trigger and an animated reveal.

<.collapsible id="more">
  <:trigger>Show advanced options</:trigger>
  <.input … />
</.collapsible>

Attributes

• id (:string) (required)
• open (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• trigger (required) - Accepts attributes:
  • variant (:string)
  • size (:string)
• inner_block (required)

Renders a description list.

<.description_list divider>
  <:item label="Name">Ada Lovelace</:item>
  <:item label="Role"><.badge>Owner</.badge></:item>
</.description_list>

Attributes

• orientation (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
• divider (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• item (required) - Accepts attributes:
  • label (:string) (required)

Renders an empty state.

<.empty_state title="No projects yet" description="Create your first project to get started.">
  <:icon><.icon name="plus" /></:icon>
  <:actions><.button color="accent">New project</.button></:actions>
</.empty_state>

Attributes

• title (:string) (required)
• description (:string) - Defaults to nil.
• variant (:string) - Defaults to "dashed". Must be one of "dashed", or "plain".
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• icon
• actions
• inner_block

Renders a page header with title, optional description, an eyebrow slot (breadcrumbs go here) and an actions slot.

<.page_header title="Projects" description="Everything your team is working on.">
  <:eyebrow><.breadcrumbs>…</.breadcrumbs></:eyebrow>
  <:actions><.button color="accent">New project</.button></:actions>
</.page_header>

Attributes

• title (:string) (required)
• description (:string) - Defaults to nil.
• heading_level (:string) - Defaults to "h1".
• divider (:boolean) - Defaults to true.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• eyebrow
• actions

Renders a KPI tile.

<.stat label="Revenue" value="$48.2k" delta="+12.4%" trend="up" description="vs. last month" />

Attributes

• label (:string) (required)
• value (:string) (required)
• delta (:string) - Defaults to nil.
• trend (:string) - Defaults to nil.Must be one of nil, "up", "down", or "flat".
• description (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• icon

Renders a step indicator.

<.stepper current={2}>
  <:step title="Account" description="Email and password" />
  <:step title="Profile" />
  <:step title="Done" />
</.stepper>

Steps before current are complete, current is marked with aria-current="step". Give a step navigate/patch to make it a link. Set pulse when the stepper tracks something running on its own (a deploy, an import) so the current marker breathes; it stays still under prefers-reduced-motion.

Attributes

• current (:integer) (required) - 1-based index of the current step.
• orientation (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
• pulse (:boolean) - animate the current step's marker; for tasks in progress, not for forms the user drives. Defaults to false.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• step (required) - Accepts attributes:
  • title (:string) (required)
  • description (:string)
  • navigate (:string)
  • patch (:string)

Renders a vertical timeline.

<.timeline>
  <:item title="Deployed v2.1" time="2h ago" color="success">Rolled out to all regions.</:item>
  <:item title="Build started" time="3h ago" />
</.timeline>

Attributes

• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• item (required) - Accepts attributes:
  • title (:string) (required)
  • time (:string)

  • color (:string) - accent | success | warning | danger | info.