Docs
Tabs
Switch between alternative versions of the same content.
Use tabs when the same instruction differs by platform, language, or package manager. Declare the labels once on the container, then one <Tab> per label in the same order.
<Tabs data-items="npm|pnpm|bun">
<Tab value="npm">
`npm install`
</Tab>
<Tab value="pnpm">
`pnpm install`
</Tab>
<Tab value="bun">
`bun install`
</Tab>
</Tabs>
Rendered:
Runs the slowest of the three, and the one every reader already has.
Content-addressed store, so repeat installs are near-instant.
Fastest, and the runtime the Proa playground benchmarks against.
Attributes
| Tag | Attribute | Required | Meaning |
|---|---|---|---|
<Tabs> | data-items | yes | Labels, |-separated. Whitespace around each is trimmed |
<Tab> | value | no | Accessible label for the panel (aria-label). Panels always bind to labels in document order; omit it and the matching data-items label is used |
Constraints
Eight panels maximum. The generated stylesheet addresses panels with nth-of-type rules up to eight. A ninth panel still renders, but nothing can switch to it — and the build reports the mistake rather than shipping a dead tab.
Close every container. An unclosed <Tabs> is reported by name at build time.
<Tab> outside a <Tabs> is not treated as a component at all — it falls through to the Markdown renderer as raw HTML. That is deliberate: it keeps <Tab>-shaped text in prose from being captured.
Good to know: Tabs are CSS-only. They lower to a radio group (
input[name="proa-docs-tabs-0"]) plus sibling panels, so they work with JavaScript disabled. A replacement theme must implement the:checkedsibling selectors or every panel renders stacked — see Styling contract.