---
title: Code Tabs
description: A tabs component that displays code for different languages/CLI commands.
icon: file-code
author:
  name: imskyleen
  url: https://github.com/imskyleen
mode: wide
---

<PoweredBy
  packages={[
    { name: 'Base UI', url: 'https://base-ui.com/react/components/tabs' },
    { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/tabs' },
    { name: 'Motion', url: 'https://motion.dev/' },
  ]}
/>

### Installation

```package-install
npx shadcn@latest add @redpanda/code-tabs
```

<ComponentPreview name="code-tabs-demo" />

## Usage

```tsx
<CodeTabs codes={codes} />
```

If you want to toggle between light and dark themes, you can use the `theme` prop.

```tsx
<CodeTabs codes={codes} theme="dark" />
```

Use `defaultValue` for an initial selection or `value` and `onValueChange` for controlled selection. Controlled tabs only change after the parent accepts the new item ID. Copy always uses the selected item's original source, not its highlighted HTML.

The code viewer owns its compact header and panels; it does not inherit generic Tabs sizing. Its single visual variant is `standard`. If highlighting cannot load or a language is unsupported, the original source remains readable and copyable as plain text.

## When to use

Use this decision tree to determine when to use the Code Tabs component:

```mermaid
graph TD;
    A[❓ Need to show multiple code examples?] --> B{What type of content?};
    B --> C[✅ Different CLI commands];
    B --> D[✅ Multiple language examples];
    B --> E[ℹ️ Single code example];
    B --> F[⚠️ Before/after comparisons];

    C --> G{Package manager commands?};
    D --> H{Same functionality, different syntax?};
    E --> I[ℹ️ Use regular CodeBlock];
    F --> J[⚠️ Use CodeComparison];

    G --> K[✅ Use CodeTabs for install commands];
    H --> L[✅ Use CodeTabs for language variants];

    K --> M{Need copy functionality?};
    L --> M;

    M --> N["✅ Set copyButton=true (default)"];
    M --> O[⚠️ Set copyButton=false];

    N --> P{Custom themes needed?};
    O --> P;

    P --> Q[✅ Set custom themes prop];
    P --> R[ℹ️ Use default github themes];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class C,D,K,L,N,Q recommended;
    class F,J,O discouraged;
    class A,B,G,H,M,P decision;
    class E,I,R neutral;
```

## Examples

### Install Tabs

<ComponentPreview name="code-tabs-install-demo" />

## Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `codes?` | `Record<string, string>` | - | The codes to display in the tabs |
| `lang?` | `string` | `bash` | The language of the code |
| `themes?` | `Record<string, string>` | `{ light: 'github-light-high-contrast', dark: 'github-dark-default' }` | The shiki themes to display in the tabs |
| `copyButton?` | `boolean` | `true` | Whether to show the copy button. |
| `onCopy?` | `(content: string) => void` | - | The function to call when copy is successful. |
| `variant?` | `'standard'` | `standard` | The visual variant of the code tabs |

## Credits

- We use [Base UI](https://base-ui.com/react/components/tabs) for the underlying tabs component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/tabs) for the tabs style.
- The embedded copy button's animation is powered by [Motion](https://motion.dev/).