Code Block Group

Let readers switch between equivalent code examples in one place.

npm install @heyo-sh/heyo-docs

<CodeBlockGroup>
<CodeBlock language="bash" title="npm">
  {"npm install @heyo-sh/heyo-docs"}
</CodeBlock>
<CodeBlock language="bash" title="pnpm">
  {"pnpm add @heyo-sh/heyo-docs"}
</CodeBlock>
<CodeBlock language="bash" title="Yarn">
  {"yarn add @heyo-sh/heyo-docs"}
</CodeBlock>
<CodeBlock language="bash" title="Bun">
  {"bun add @heyo-sh/heyo-docs"}
</CodeBlock>
</CodeBlockGroup>

CodeBlockGroup groups equivalent CodeBlock examples behind tabs. It keeps a guide compact when readers can choose among package managers, frameworks, operating systems, or API languages without duplicating the surrounding explanation.

Set the initial example

Each child block uses its title as its tab label. The first block is active by default; provide defaultValue to open another block. Keep every tab equivalent in purpose so switching does not conceal a required step.

bun add @heyo-sh/heyo-docs

The group's copy control always copies the currently active source. Use a separate CodeBlock when examples are not alternatives and readers need to see all of them at once.

Offer complete installation choices

Use a group for alternatives that differ in syntax but lead to the same result. This example makes the preferred package manager visible first while keeping the other options one click away.

bun add @heyo-sh/heyo-docs @vitejs/plugin-react

<CodeBlockGroup defaultValue="bun" variant="line">
<CodeBlock language="bash" title="npm">
  {"npm install @heyo-sh/heyo-docs @vitejs/plugin-react"}
</CodeBlock>
<CodeBlock language="bash" title="pnpm">
  {"pnpm add @heyo-sh/heyo-docs @vitejs/plugin-react"}
</CodeBlock>
<CodeBlock language="bash" title="bun">
  {"bun add @heyo-sh/heyo-docs @vitejs/plugin-react"}
</CodeBlock>
<CodeBlock language="bash" title="yarn">
  {"yarn add @heyo-sh/heyo-docs @vitejs/plugin-react"}
</CodeBlock>
</CodeBlockGroup>

Properties

childrenCodeBlock[]optional

Direct CodeBlock elements to present as alternatives.

defaultValuestringoptional

The tab value to open initially. Values are derived from each block's title, language, or fallback option label. It defaults to the first block.

variant"default" | "line"optional

Selects the tab appearance. It defaults to line.

classNamestringoptional

Extra classes applied to the grouped code container.