Display

Code Tabs

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

Import

tsx

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

bash

npx cronus-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 cronus-ui add code-tabs

bash

bun add @cronus-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 cronus-ui add code-tabs

tsx

<CodeTabs
  storageKey="pkg-manager"
  items={[
    { label: "bun", code: "bunx cronus-ui add code-tabs", language: "bash" },
    { label: "npm", code: "npx cronus-ui add code-tabs", language: "bash" },
    { label: "pnpm", code: "pnpm dlx cronus-ui add code-tabs", language: "bash" },
    { label: "yarn", code: "yarn dlx cronus-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);
}`,
    },
  ]}
/>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component CodeTabsDefault layout:inline style:code-tabs {
  aria-label:"Install"
  label "Install"
  text "bun"
  text "npm"
}

page "/audit/code-tabs/default" type:custom {
  use CodeTabsDefault
}

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.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.