Shortcodes

Shortcodes are inline helpers you call from Markdown with the {{ }}syntax. Each maps to a template in the theme's shortcodes/directory and renders with Chirp UI markup. Arguments are key="value"pairs (some shortcodes also accept a leading positional value); paired shortcodes wrap inner content between an opening and a{{ }} closing tag.

This page documents every shipped shortcode with its parameters and a live rendered example.

component_specimen

Renders a live, in-page demo of a Chirp UI component. This is the live-demo mechanism the components catalog uses, so a reader can see real rendered output without leaving the site or running a local app.

The shortcode demos a curated set of primitives (toggle_group, slider, scroll_area, item, data_table, kbd, separator, aspect_ratio, label). For any other name, it renders the inner content you provide as the preview body.

{{</* component_specimen name="item" title="Item" description="Reusable row anatomy for lists and menus." */>}}

For the full catalog of components with options and live specimens, see the component reference.

tip / warning / danger

Inline semantic callouts. Each is a paired shortcode whose inner Markdown becomes the callout body, rendered with the Chirp UIcalloutmacro (success, warning, and errorvariants respectively).

{{</* tip title="Pro tip" */>}}
Prefer the macro vocabulary over raw classes.
{{</* /tip */>}}

For the complete semantic admonition family (note, hint, caution, …) as a block directive, see directives — admonition.

figure

A captioned, optionally linked image rendered inside a Chirp UI card.

{{</* figure src="/img/diagram.png" alt="Request flow" caption="Figure 1. Request flow." link="/docs/architecture/" */>}}

The image loads lazily; the caption renders as a muted, smallfigcaption.

img

A bare lazy-loaded<img>. Use it inside gallery(it reads the parent gallery'sclass) or anywhere you want a plain image without the card chrome.

{{</* img src="/img/screen-1.png" alt="Dashboard" */>}}

gallery

A responsive 3-column image grid. Wrap one or moreimgshortcodes inside it.

{{</* gallery */>}}
{{</* img src="/img/a.png" alt="A" */>}}
{{</* img src="/img/b.png" alt="B" */>}}
{{</* img src="/img/c.png" alt="C" */>}}
{{</* /gallery */>}}

audio

An audio player rendered inside a Chirp UI card.

{{</* audio src="/audio/episode-1.mp3" title="Episode 1" */>}}

details

A collapsible disclosure rendered with the Chirp UIaccordion_itemmacro.

{{</* details summary="Show the full configuration" open="false" */>}}
The body Markdown renders inside the disclosure.
{{</* /details */>}}

</div>

highlight

A language-tagged code block. The inner content renders verbatim inside a chirpui-code-block.

{{</* highlight lang="python" */>}}
print("hello")
{{</* /highlight */>}}

For most code, a fenced Markdown block is simpler. Reach forhighlightwhen you need to drive the language tag from a shortcode argument.

blockquote

A cited pull-quote rendered as a neutral Chirp UI callout.

{{</* blockquote cite="The chirp-ui thesis" */>}}
The registry is the one bet.
{{</* /blockquote */>}}

ref / relref

Resolve a link to another page by its source path at build time.refresolves against the site root;relrefresolves relative to the current page. If the target moves, the build fails loudly instead of shipping a dead link.

{{</* ref path="docs/components/_index.md" text="the component catalog" */>}}
{{</* relref "controls.md" text="control selection" */>}}

param

Echo a value from site config (preferred) or the current page's front matter into prose. Useful for keeping version numbers and shared values in one place.

The current version is {{</* param "version" */>}}.

Looking for block-level containers instead? See the directives reference.