Code Tabs
A tabs component that displays code for different languages/CLI commands.
Base UI
Shadcn UI
MotionInstallation
npx shadcn@latest add @redpanda/code-tabspnpm dlx shadcn@latest add @redpanda/code-tabsyarn dlx shadcn@latest add @redpanda/code-tabsbunx shadcn@latest add @redpanda/code-tabsnubx shadcn@latest add @redpanda/code-tabsaube dlx shadcn@latest add @redpanda/code-tabsUsage
<CodeTabs codes={codes} />If you want to toggle between light and dark themes, you can use the theme prop.
<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:
Examples
Install Tabs
Props
codes?Record<string, string>
The codes to display in the tabs
Record<string, string>lang?string
The language of the code
stringbashthemes?Record<string, string>
The shiki themes to display in the tabs
Record<string, string>{ light: 'github-light-high-contrast', dark: 'github-dark-default' }copyButton?boolean
Whether to show the copy button.
booleantrueonCopy?(content: string) => void
The function to call when copy is successful.
(content: string) => voidvariant?'standard'
The visual variant of the code tabs
'standard'standard