Data Display

Code Tabs

Tabbed code snippets with per-tab copy and a localStorage-synced tab choice.

Import

tsx

import { CodeTabs } from "@cooud-ui/ui";

bash

npx cooud-ui add code-tabs

Examples

Package manager installer

The classic bun/npm/pnpm/yarn switcher. Give every instance the same `storageKey` and the visitor's choice is persisted to localStorage and mirrored across the whole page (and across browser tabs) — flip one below and watch the other follow.

bash

bunx cooud-ui add code-tabs

bash

bun add @cooud-ui/ui

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cooud-ui add code-tabs

tsx

<CodeTabs
  storageKey="pkg-manager"
  items={[
    { label: "bun", code: "bunx cooud-ui add code-tabs", language: "bash" },
    { label: "npm", code: "npx cooud-ui add code-tabs", language: "bash" },
    { label: "pnpm", code: "pnpm dlx cooud-ui add code-tabs", language: "bash" },
    { label: "yarn", code: "yarn dlx cooud-ui add code-tabs", language: "bash" },
  ]}
/>

Multi-language snippet

General code tabs — one panel per label, each with its own copy button and a `language` hint in the header. `defaultLabel` picks the starting tab; `onLabelChange` reports user switches.

export function formatBRL(value: number): string {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
  }).format(value);
}

tsx

<CodeTabs
  defaultLabel="TypeScript"
  items={[
    {
      label: "TypeScript",
      language: "ts",
      code: `export function formatBRL(value: number): string {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
  }).format(value);
}`,
    },
    {
      label: "JavaScript",
      language: "js",
      code: `export function formatBRL(value) {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
  }).format(value);
}`,
    },
  ]}
/>

API Reference

Generated from the component's exported types.

CodeTabsProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "dir" | "onChange">

Prop	Type	Default	Description
`items`*	`CodeTabsItem[]`	—	The snippets to switch between — one tab + one panel per item.
`defaultLabel`	`string`	—	Label selected on first render. Falls back to the first item when omitted or unknown. When is set, a stored choice (applied after mount) wins over this.
`storageKey`	`string`	—	Persist the chosen label to `localStorage` under this key and keep every `CodeTabs` sharing the key in sync — across the page and across browser tabs. The stored value is only read after mount, so server-rendered HTML and the first client render always agree (no hydration mismatch).
`onLabelChange`	`(label: string) => void`	—	Called with the newly selected label on user-initiated changes.