# CodeTabs

> Tabs over code that mirrors a reader's choice — package manager, framework, language.

```ts
import { CodeTabs } from "@sdxc/ui/docs";
```

Renders the strip of tabs over a stack of panels that share one grid cell, so the set
is as tall as its tallest panel and switching never moves the page. The selected tab's
underline grows in over 150ms, and holds still under reduced motion.

## Examples

```tsx
<CodeTabs syncKey="framework" aria-label={t("framework")} tabs={[
	{ label: "Remix", value: "remix", children: <CodeBlock title="app/root.tsx" … /> },
	{ label: "Hono", value: "hono", children: <CodeBlock title="src/index.ts" … /> },
]} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `tabs` | `readonly Tab[]` |  |
| `syncKey?` | `string` | Every set with this key on the page switches together, such as `package-manager`. |
| `persist?` | `CodeTabsPersistence` | Where a synced choice is remembered between pages: `cookie` lets the server render it (read it with `readCodeTabsCookie` and pass `selected`), `local` restores it after hydration, and `none` only syncs this page. Defaults to `local`. |
| `selected?` | `string` | The value of the tab to render selected, such as the reader's remembered choice. Defaults to the first tab. |
| `"aria-label"` | `string` | Names the strip of tabs for assistive technology, such as "Package manager". |

Also accepts everything in `Omit<TagProps<"form">, "children" | "aria-label">`.