AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
Code group
Show related code samples in a CodeGroup with tabbed navigation so readers can switch languages, package managers, or tools in one place.
Use the CodeGroup component to show multiple related code blocks in a single tabbed container. This is useful for showing the same command or snippet across different languages or tools.
Use CodeGroup whenever readers need the same instruction in more than one form: package managers, programming languages, or shell variants. It keeps the page shorter than stacking separate code blocks and lets readers pick their stack without scrolling past irrelevant commands. Tab labels come from each fence's title attribute, so name tabs explicitly when two blocks share a language.
On quickstart pages, a common pattern is a CodeGroup with npm, pnpm, and yarn install commands followed by blodemd new. For API reference pages, group Node.js, Python, and cURL examples so integrators can copy the sample that matches their backend.
Basic usage
Wrap two or more fenced code blocks inside <CodeGroup>. Each tab is labeled from the title attribute on the code block:
<CodeGroup>
```bash title="npm"
npm install blodemd
```
```bash title="pnpm"
pnpm add blodemd
```
```bash title="yarn"
yarn add blodemd
```
</CodeGroup>Published with Blode.md