Codegroup

Group code blocks with tabs for different languages or examples.

Usage

tsx

<CodeGroup group="pm" defaultValue="bun" persist>
  <CodeTabs>
    <CodeTab value="bun" label="bun" />
    <CodeTab value="npm" label="npm" />
    <CodeTab value="pnpm" label="pnpm" />
  </CodeTabs>
  <CodeTab value="bun" label="bun">
    <CodeBlock lang="bash">bun add fromsrc</CodeBlock>
  </CodeTab>
  <CodeTab value="npm" label="npm">
    <CodeBlock lang="bash">npm install fromsrc</CodeBlock>
  </CodeTab>
  <CodeTab value="pnpm" label="pnpm">
    <CodeBlock lang="bash">pnpm add fromsrc</CodeBlock>
  </CodeTab>
</CodeGroup>

Live

bash

bun add fromsrc

Components

CodeGroup

Container for tabbed code blocks.

prop	type	default	description
defaultValue	string	-	Initially active tab
group	string	"global"	Shared persistence key
persist	boolean	true	Store selected tab in local storage

CodeTabs

Container for tab buttons.

CodeTab

Individual tab button and content.

prop	type	default	description
value	string	required	Unique identifier
label	string	required	Tab label text

Keyboard

key	action
`ArrowLeft` / `ArrowRight`	previous / next tab
`Home` / `End`	first / last tab

Group code blocks with tabs for different languages or examples.

Usage

tsx

<CodeGroup group="pm" defaultValue="bun" persist>
  <CodeTabs>
    <CodeTab value="bun" label="bun" />
    <CodeTab value="npm" label="npm" />
    <CodeTab value="pnpm" label="pnpm" />
  </CodeTabs>
  <CodeTab value="bun" label="bun">
    <CodeBlock lang="bash">bun add fromsrc</CodeBlock>
  </CodeTab>
  <CodeTab value="npm" label="npm">
    <CodeBlock lang="bash">npm install fromsrc</CodeBlock>
  </CodeTab>
  <CodeTab value="pnpm" label="pnpm">
    <CodeBlock lang="bash">pnpm add fromsrc</CodeBlock>
  </CodeTab>
</CodeGroup>

Live

bash

bun add fromsrc

Components

CodeGroup

Container for tabbed code blocks.

prop	type	default	description
defaultValue	string	-	Initially active tab
group	string	"global"	Shared persistence key
persist	boolean	true	Store selected tab in local storage

CodeTabs

Container for tab buttons.

CodeTab

Individual tab button and content.

prop	type	default	description
value	string	required	Unique identifier
label	string	required	Tab label text

Keyboard

key	action
`ArrowLeft` / `ArrowRight`	previous / next tab
`Home` / `End`	first / last tab