Code Tabs

Displays a list of code blocks with tabs.

Preview

index.js

function () {
  console.log('Hello, JS!')
}

index.ts

function (): void {
  console.log('Hello, TS!')
}

Usage

import { CodeTabItem, CodeTabs } from 'starlight-theme-nova/components'

<CodeTabs>
  <CodeTabItem
    label="index.js"
    lang="js"
    code={`function () {\n  console.log('Hello, JS!')\n}`}
  />
  <CodeTabItem
    label="index.ts"
    lang="ts"
    code={`function (): void {\n  console.log('Hello, TS!')\n}`}
  />
</CodeTabs>

<CodeTabs> Props

syncKey

type: string

A key used to keep multiple tab groups synchronized across multiple pages.

<CodeTabItem> Props

The <CodeTabItem> component accepts the following props, as well as all other <Code> component props:

label

required

type: string

The label to display in the tab.