Code Tabs

Code tabs work best when readers should stay on one page but switch between equivalent code examples, such as package managers, frameworks, or deployment targets.

Use in MDX

Add a CodeTabs block and provide one named slot per code panel:

<CodeTabs labels={["npm", "pnpm", "yarn"]}>
  <div slot="panel-1">
    ```bash
    npm install
    ```
  </div>
  <div slot="panel-2">
    ```bash
    pnpm install
    ```
  </div>
  <div slot="panel-3">
    ```bash
    yarn install
    ```
  </div>
</CodeTabs>

Implementation notes

The component lives in src/components/docs/CodeTabs.astro. It reuses the same accessible tab interaction pattern as the standard Tabs component, but adds a code-focused shell that pairs better with fenced code blocks.

When to use CodeTabs instead of Tabs

• Use CodeTabs when each panel is mainly code.
• Use Tabs when each panel contains paragraphs, lists, or mixed rich content.
• Keep labels short so the controls stay readable on smaller screens.

Preview

npm install
npm run dev

pnpm install
pnpm dev

yarn install
yarn dev

import { CompassWidget } from '@compass/react';

export function HelpPanel() {
  return <CompassWidget article="set-up-compass" />;
}

<script setup lang="ts">
import { CompassWidget } from '@compass/vue';
</script>

<template>
  <CompassWidget article="set-up-compass" />
</template>