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

<Callout type="info">
  The InstallTabs component has been updated and is now called CodeTabs. It can
  now be used to make both install tabs and code tabs!
</Callout>

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

## Installation

<ComponentInstallation name="code-tabs" />

## Usage

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

## Examples

### Install Tabs

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

## Props

<TypeTable
  type={{
    codes: {
      description: 'The codes to display in the tabs',
      type: 'Record<string, string>',
      required: true,
    },
    lang: {
      description: 'The language of the code',
      type: 'string',
      required: false,
      default: 'bash',
    },
    themes: {
      description: 'The shiki themes to display in the tabs',
      type: 'Record<string, string>',
      required: false,
      default: "{ light: 'github-light', dark: 'github-dark' }",
    },
    copyButton: {
      description: 'Whether to show the copy button.',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    onCopy: {
      description: 'The function to call when copy is successful.',
      type: '(content: string) => void',
      required: false,
    },
  }}
/>