Tabs

The ::tabs directive renders a set of tab panels for equivalent-but-alternative content. If your tabs contain only code blocks, reach for code group instead — it's a specialized, simpler directive for that case.

Basic usage

Install with npm:

npm install @red-glare/astro

Install with pnpm:

pnpm add @red-glare/astro

Install with yarn:

yarn add @red-glare/astro

::tabs
  ::tabs-item{label="npm"}
    Install with npm:

    ```bash
    npm install @red-glare/astro
    ```
  ::
  ::tabs-item{label="pnpm"}
    Install with pnpm:

    ```bash
    pnpm add @red-glare/astro
    ```
  ::
::

With icons

icon accepts any Iconify reference string (e.g. i-logos-vue, i-logos-react, i-vscode-icons-file-type-html). The icon is resolved at parse time and inlined as an SVG in the tab button.

Vue-flavored content goes here.

Available icon sets

Red Glare ships these Iconify sets pre-bundled:

i-lucide-* — Lucide general-purpose icons.
i-logos-* — Logos tech logos (React, Vue, etc.).
i-vscode-icons-* — VS Code Icons file-type icons.

Any other set requires pulling in the corresponding @iconify-json/* package and extending the resolver.

Accessibility

Implements the WAI-ARIA Authoring Practices tabs pattern:

role="tablist" on the container.
role="tab" on each button with aria-selected and aria-controls.
role="tabpanel" on each panel with aria-labelledby.
Only the active tab is in the focus order (tabindex="0" on active, -1 on others).

Keyboard navigation:

Key	Action
`←` / `→`	Previous / next tab, wraps around
`Home`	First tab
`End`	Last tab
`Enter` / `Space`	Activate the focused tab

Pass aria-label on the outer directive to name the tab group when more than one tab group appears on a page:

::tabs{aria-label="Install with your package manager"}
  ::tabs-item{label="npm"}...:::
  ::tabs-item{label="pnpm"}...:::
::

Props reference

`::tabs`

Prop	Type	Default
`aria-label`	`string`	`"Tabs"`

`::tabs-item`

Prop	Type	Default
`label`	`string`	item index
`icon`	Iconify reference string	—
`description`	`string`	— (fallback panel content if body is empty)

When to use tabs vs. code-group

Situation	Reach for
Three install command variants (pnpm, npm, yarn)	`::code-group`
A config file shown in JS and TS	`::code-group`
"Vue vs. React" where each tab has prose + a code sample	`::tabs`
Swapping between prose alternatives with no code	`::tabs`

Code group is narrower — it expects each child to be a fenced code block and pulls the label from the [bracket] syntax. Tabs is the generic fallback.

Source

Components: packages/astro/src/components/Tabs.tsx, TabsItem.tsx :: ::