Tabs

Let readers choose between equivalent examples.

Use Tabs when each panel solves the same task for a different audience: package manager, framework, language, operating system, or output format. Do not use tabs for unrelated content; readers may miss hidden information.

Import

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

Basic Usage

Tabs can contain prose, lists, links, and other MDX content.

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

<Tabs>
  <TabItem label="Preview">
    Tabs can contain prose, lists, links, and other MDX content.
  </TabItem>
  <TabItem label="Code">
    ```astro
    <Tabs>
      <TabItem label="Preview">Preview content</TabItem>
      <TabItem label="Code">Code content</TabItem>
    </Tabs>
    ```
  </TabItem>
</Tabs>

Commands With Copy

pnpm add @prosefly/astro-components

npm install @prosefly/astro-components

yarn add @prosefly/astro-components

Set copy when every panel contains a code block and readers are likely to copy the active command.

<Tabs copy syncKey="install-command">
  <TabItem label="pnpm" icon="simple-icons:pnpm">
    ```sh
    pnpm add @prosefly/astro-components
    ```
  </TabItem>
  <TabItem label="npm" icon="simple-icons:npm">
    ```sh
    npm install @prosefly/astro-components
    ```
  </TabItem>
  <TabItem label="yarn" icon="simple-icons:yarn">
    ```sh
    yarn add @prosefly/astro-components
    ```
  </TabItem>
</Tabs>

Synced Groups

Use syncKey when the same choices appear more than once on a page. Selecting pnpm in one group will select pnpm in the other group.

pnpm dev

npm run dev

pnpm build

npm run build

<Tabs syncKey="workflow-command">
  <TabItem label="pnpm" icon="simple-icons:pnpm">
    ```sh
    pnpm dev
    ```
  </TabItem>
  <TabItem label="npm" icon="simple-icons:npm">
    ```sh
    npm run dev
    ```
  </TabItem>
</Tabs>

<Tabs syncKey="workflow-command">
  <TabItem label="pnpm" icon="simple-icons:pnpm">
    ```sh
    pnpm build
    ```
  </TabItem>
  <TabItem label="npm" icon="simple-icons:npm">
    ```sh
    npm run build
    ```
  </TabItem>
</Tabs>

Props

Component	Prop	Type	Notes
`Tabs`	`copy`	`boolean \| string`	Shows a copy button for the active panel.
`Tabs`	`defaultValue`	`string`	Selects a tab by `label` or `value`.
`Tabs`	`syncKey`	`string`	Shares selection across groups with matching labels.
`TabItem`	`label`	`string`	Required visible tab label.
`TabItem`	`value`	`string`	Stable internal value.
`TabItem`	`icon`	`string`	Iconify icon shown in the active tab indicator.

Edit this page

Last updated Jul 18, 2026