Tabs

Use Tabs when readers need to switch between equivalent examples, such as package managers, frameworks, output formats, or preview/code views.

Import

import { TabItem, Tabs } from '@prosefly/astro-components';

Basic Usage

The syntax follows Starlight: place one or more TabItem components directly inside Tabs.

<Tabs>
  <TabItem label="Preview">Preview content</TabItem>
  <TabItem label="Code">Code content</TabItem>
</Tabs>

<Tabs>
  <TabItem label="Preview">
    Preview content
  </TabItem>
  <TabItem label="Code">
    Code content
  </TabItem>
</Tabs>

With Icons

Add icon to a TabItem with any Iconify icon name. When a group has icons, the active tab icon appears at the start of the tab header.

pnpm install @prosefly/astro-components

npm install @prosefly/astro-components

yarn add @prosefly/astro-components

bun add @prosefly/astro-components

<Tabs defaultValue="npm" syncKey="package-manager">
  <TabItem label="pnpm" icon="simple-icons:pnpm">
    ```sh
    pnpm install @prosefly/astro-components
    ```
  </TabItem>
  <TabItem label="npm" icon="simple-icons:npm">
    ```sh
    npm install @prosefly/astro-components
    ```
  </TabItem>
</Tabs>

Copy Code

Set copy on Tabs when each panel contains a code block and the active panel should be copyable from the tab header.

pnpm add @prosefly/astro-components

npm install @prosefly/astro-components

yarn add @prosefly/astro-components

The copy button reads the first code block in the active panel.

Synced Groups

Groups with the same syncKey share the selected label. This is useful for package manager examples repeated across a page.

pnpm dev

npm run dev

yarn dev

pnpm build

npm run build

yarn build

Use matching labels across synced groups. syncKey stores the selected label in localStorage, so the reader’s choice can persist across navigation.

Custom Values

Use value when a tab needs a stable internal value that differs from its visible label. defaultValue can match either label or value.

export const defineTheme = () => ({ name: 'Lotus' });

export const defineTheme = () => ({ name: 'Lotus' });

Props

Tabs

TabItem

Syntax Rules

• Tabs must contain only direct TabItem children.
• Each TabItem must have a label.
• Put Markdown content inside each TabItem; do not put loose Markdown between tab items.
• Use concise labels so the tab list remains easy to scan on small screens.