Code Tabs
Use code tabs for command variants, framework examples, and other code snippets that share the same step.
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: mdx <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
bash npm install npm run dev tsx import { CompassWidget } from '@compass/react'; export function HelpPanel() { return <CompassWidget article="set-up-compass" />; }