Docs
Tabs
Switch between alternative versions of the same content.
Use tabs to group related instructions or alternatives. Declare the labels once on the container, then one <Tab> per label in the same order.
<Tabs data-items="Install|Build|Test">
<Tab value="Install">
`pnpm install`
</Tab>
<Tab value="Build">
`pnpm run build`
</Tab>
<Tab value="Test">
`pnpm test`
</Tab>
</Tabs>
Rendered:
Install the project's locked dependencies with pnpm.
Run the project's build script.
Run the project's test script.
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.