An accordion of collapsible panels, built on native <details> (free keyboard + a11y). Pass exclusive so opening one closes the others (native <details name> grouping); mark an :item open to start expanded.

<.accordion id="faq" exclusive>
  <:item title="What is Skua?">A headless, token-styled component kit.</:item>
  <:item title="Is it free?" open>Yes — MIT.</:item>
</.accordion>

Attributes

• id (:string) (required)
• exclusive (:boolean) - Defaults to false.
• class (:any) - Defaults to nil.

Slots

• item (required) - Accepts attributes:
  • title (:string) (required)
  • open (:boolean)

An inline alert / callout — a persistent message (unlike a transient toast).

<.alert variant="warning" title="Heads up">Your trial ends in 3 days.</.alert>
<.alert variant="success">Saved.</.alert>

variant is info | success | warning | error | neutral. Warning/error get role="alert". Pass icon={false} to drop the leading glyph, or an :actions slot for trailing buttons.

Attributes

• variant (:string) - Defaults to "info". Must be one of "info", "success", "warning", "error", or "neutral".
• title (:string) - Defaults to nil.
• icon (:boolean) - Defaults to true.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block
• actions

An avatar — image with a graceful initials fallback.

<.avatar src={@user.avatar_url} name={@user.name} />
<.avatar name="Ada Lovelace" size="lg" />

size is xs | sm | md | lg | xl; shape is circle (default) or square (rounded with --sk-r). Initials derive from name unless initials is set.

Attributes

• src (:string) - Defaults to nil.
• name (:string) - Defaults to nil.
• alt (:string) - Defaults to nil.
• initials (:string) - Defaults to nil.
• size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
• shape (:string) - Defaults to "circle". Must be one of "circle", or "square".
• class (:any) - Defaults to nil.
• Global attributes are accepted.

A small status badge/chip. The success/warning/info/danger variants pull their colours from the matching --skua-* status tokens, so they stay in harmony and re-theme with everything else. (ok is kept as an alias for success.) Rounding shares --sk-chip-r with the multi-select chips.

<.badge>Draft</.badge>
<.badge variant="success">Live</.badge>
<.badge variant="warning">Pending</.badge>
<.badge variant="danger">Failed</.badge>

Attributes

• variant (:string) - Defaults to "neutral". Must be one of "neutral", "success", "warning", "info", "danger", or "ok".
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

A breadcrumb trail. Give each :crumb an href/navigate/patch; a final crumb without one renders as the current page.

<.breadcrumb>
  <:crumb navigate={~p"/"}>Home</:crumb>
  <:crumb navigate={~p"/team"}>Team</:crumb>
  <:crumb>Settings</:crumb>
</.breadcrumb>

Attributes

• class (:any) - Defaults to nil.

Slots

• crumb (required) - Accepts attributes:
  • href (:string)
  • navigate (:string)
  • patch (:string)

A surface card.

<.card>
  <:title>Plan</:title>
  <:subtitle>Pro · billed monthly</:subtitle>
  <p class="sk-p">Everything in Free, plus…</p>
  <:footer><.button variant="primary">Upgrade</.button></:footer>
</.card>

Attributes

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

Slots

• title
• subtitle
• footer
• inner_block (required)

A 7px status dot. Pass a color (any CSS color or token).

Attributes

• color (:string) - Defaults to "var(--skua-fg-muted)".
• class (:any) - Defaults to nil.
• Global attributes are accepted.

An empty state — for "no results", an empty table, an unconfigured feature.

<.empty_state title="No users yet">
  <:icon><svg>…</svg></:icon>
  Invite your team to get started.
  <:action><.button variant="primary">Invite</.button></:action>
</.empty_state>

Attributes

• title (:string) - Defaults to nil.
• class (:any) - Defaults to nil.

Slots

• icon
• action
• inner_block

A page/section header — title, optional subtitle, optional right-aligned actions. (Drop-in for CoreComponents.header/1.)

<.header>
  Team members
  <:subtitle>Manage who has access.</:subtitle>
  <:actions><.button variant="primary">Invite</.button></:actions>
</.header>

Attributes

• class (:any) - Defaults to nil.
• level (:string) - Defaults to "h2". Must be one of "h1", "h2", or "h3".

Slots

• subtitle
• actions
• inner_block (required)

A description list — title/value rows. (Drop-in for CoreComponents.list/1.)

<.list>
  <:item title="Name">Ada Lovelace</:item>
  <:item title="Email">ada@example.com</:item>
</.list>

Attributes

• class (:any) - Defaults to nil.

Slots

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

A progress bar. Omit value for an indeterminate (animated) bar.

<.progress value={70} />
<.progress value={3} max={5} label="Step 3 of 5" />
<.progress />

Attributes

• value (:integer) - Defaults to nil.
• max (:integer) - Defaults to 100.
• label (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

A loading placeholder with a shimmer. variant is text | circle | rect.

<.skeleton variant="text" width="60%" />
<.skeleton variant="circle" width="40px" height="40px" />
<.skeleton variant="rect" height="120px" />

Attributes

• variant (:string) - Defaults to "text". Must be one of "text", "circle", or "rect".
• width (:string) - Defaults to nil.
• height (:string) - Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

A loading spinner. size is sm | md | lg.

Attributes

• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• class (:any) - Defaults to nil.
• Global attributes are accepted.