Tabs

The built-in tabs tag — switch between Markdown panels with a sliding underline and a content crossfade. Usage, options, and live examples.

A built-in tag built from Mantine’s Tabs pieces (Tabs.List, Tabs.Tab, Tabs.Panel) behind one tag pair, with two motions layered on: the active underline slides to the tab you click instead of jumping, and the panel content crossfades in. Each tab’s body is ordinary Markdown — headings, lists, code, links, even nested component(...) calls — and renders as such. Motion is suppressed for visitors who ask for prefers-reduced-motion.

Usage

Wrap the set in {% tabs %} … {% endTabs %}, and give each panel its own {% tab label="…" %} … {% endTab %}:

{% tabs defaultValue="install" %}
{% tab label="Install" %}
Run `npm install` to pull in the toolchain.
{% endTab %}
{% tab label="Configure" %}
Add an `aardvark.config.yaml`:

- set the site `title`
- point `content` at your Markdown
- pick a `theme` accent color
{% endTab %}
{% tab label="Build" %}
Run `vark build`, then serve the `build/` directory.
{% endTab %}
{% endTabs %}

renders, live:

The label is the clickable tab; everything between the tab tags is its panel body. Click between tabs to watch the underline slide and the content crossfade — the panels above are deliberately different heights so the transition is visible.

Options

Attributes on the open tag pass straight through as Mantine Tabs props, so the full Tabs surface is available.

{% tabs %}

{% tab %}

Pills

variant="pills" swaps the underline for Mantine’s filled pill. The sliding bar turns off automatically — pills already mark the active tab — while the content still crossfades:

{% tabs variant="pills" defaultValue="cli" %}
{% tab label="CLI" %}Build from the terminal with `vark build`.{% endTab %}
{% tab label="Library" %}Import `aardvark` and call the builder yourself.{% endTab %}
{% endTabs %}