Code Tabs
Displays a list of code blocks with tabs.
Preview
Section titled “Preview”function () {
console.log('Hello, JS!')
}function (): void {
console.log('Hello, TS!')
}.my-class {
background-color: red;
}{
"name": "my-project",
"version": "1.0.0",
"description": "My project",
"main": "index.js",
"scripts": {
"dev": "astro dev",
"build": "astro build"
},
"author": "John Doe",
"license": "MIT"
}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}`}
/>
<CodeTabItem
label="styles/global.css"
lang="css"
code={`.my-class {\n background-color: red;\n}`}
/>
<CodeTabItem
label="package.json"
lang="json"
code={JSON.stringify(
{
name: 'my-project',
version: '1.0.0',
description: 'My project',
main: 'index.js',
scripts: {
dev: 'astro dev',
build: 'astro build',
},
author: 'John Doe',
license: 'MIT',
},
null,
2,
)}
/>
</CodeTabs><CodeTabs> Props
Section titled “<CodeTabs> Props”syncKey
Section titled “syncKey”type: string
A key used to keep multiple tab groups synchronized across multiple pages.
<CodeTabItem> Props
Section titled “<CodeTabItem> Props”The <CodeTabItem> component accepts the following props, as well as all other <Code> component props:
required
type: string
The label to display in the tab.