Common components

General-purpose and layout components — not domain-specific.

Card ::card

A bordered container with an optional title, holding arbitrary child content. Use this to group related content visually (e.g. a callout, a labeled block of prose or nested components) — not for tabular or multi-panel layouts (see tabs, columns).

Prop Type Required Description
title string no Optional heading shown at the top of the card.

Columns ::columns

Lays out its direct child blocks side by side in a CSS grid with the given number of columns. Each child block (paragraph, list, nested component, ...) becomes one column cell; wrap multi-block content in a nested :::card::: to keep it together in one cell. Layout only — no visual chrome of its own.

Prop Type Required Description
cols number no Number of columns to lay children out in. Defaults to 2.

Tab Panel ::tab-panel

A single labeled panel of content within a :::tabs::: container. Must be a direct child of tabs.

Prop Type Required Description
label string yes Text shown on this panel’s tab button.

Tabs ::tabs

A tabbed container: each direct child must be a :::tab-panel{label="..."}:::. Renders a clickable tab strip and shows one panel at a time. Use this for content that is genuinely alternative views of the same thing (e.g. code samples in different languages); use columns for content meant to be seen side by side.

Button ::button

An inline call-to-action, written as a text directive: :button[Label]{variant="..." size="..."}. Set `href` to render as a link styled as a button (e.g. a CTA to another page) instead of an inert <button>.

Prop Type Required Description
variant string no One of: default, secondary, destructive, outline, ghost, link. Defaults to "default".
size string no One of: default, sm, lg, icon. Defaults to "default".
href string no If set, renders as a link (<a href>) instead of a <button>.
disabled boolean no Disables the button. Ignored if `href` is set.

Badge ::badge

A small inline status label, written as a text directive: :badge[Label]{variant="..."}. Use for short status words inline in prose (e.g. "Beta", "Deprecated") — not for multi-word content or standalone blocks.

Prop Type Required Description
variant string no One of: default, secondary, destructive, outline. Defaults to "default".

Alert ::alert

A callout box for warnings/notices, with an optional title and a markdown body: :::alert{variant="..." title="..."} ...body... :::. Use `variant="destructive"` for errors/warnings; use card for neutral, non-alerting grouped content.

Prop Type Required Description
variant string no One of: default, destructive. Defaults to "default".
title string no Optional heading shown above the alert body.

Separator ::separator

A themed divider line: ::separator{orientation="horizontal|vertical"}. Defaults to horizontal. Use over a plain markdown "---" when the divider should read as UI chrome (matching the rest of the common set) rather than a prose section break.

Prop Type Required Description
orientation string no One of: horizontal, vertical. Defaults to "horizontal".

Accordion Item ::accordion-item

A single collapsible section within a :::accordion::: container. Must be a direct child of accordion.

Prop Type Required Description
label string yes Text shown on this item’s clickable header.

Accordion ::accordion

A vertically stacked set of collapsible sections: each direct child must be a :::accordion-item{label="..."}:::. Opening one item closes any other open item. Use for FAQ-style content or optional detail the reader may not need — use tabs for content meant as alternative views of the same thing.

A horizontally scrollable, snap-aligned set of slides: each direct child block becomes one full-width slide, plus prev/next buttons. Use for a sequence of items meant to be browsed one at a time (e.g. image gallery, testimonials) — use columns if every item should be visible at once.

Popover ::popover

A click-to-open panel anchored to a trigger button: :::popover{trigger="..." side="top|bottom|left|right"} ...markdown body... :::. Closes on outside click or Escape. Use for supplementary content the reader opts into (e.g. a definition, a short aside) — not for content everyone should see (use alert or card).

Prop Type Required Description
trigger string yes Text shown on the clickable trigger button.
side string no One of: top, bottom, left, right. Defaults to "bottom".

Video ::video

Embeds a YouTube or Vimeo video from its ordinary page URL: ::video{url="https://www.youtube.com/watch?v=..."}. Tier 0 — provider and video ID are both detected from the URL; nothing else to author.

Prop Type Required Description
url string yes A YouTube or Vimeo video page URL (not an embed URL).

Audio ::audio

Embeds a Spotify track/album/playlist/episode/show or a SoundCloud track from its ordinary page URL: ::audio{url="https://open.spotify.com/track/..."}. Tier 0 — provider and any needed ID are detected from the URL; nothing else to author.

Prop Type Required Description
url string yes A Spotify or SoundCloud page URL (not an embed URL).