Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProTabbed code samples in several languages with syntax highlighting, a copy button and a remembered language choice.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { SnippetTabs } from "@/components/ui/snippet-tabs"<SnippetTabs
title="Create a customer"
storageKey="docs-language"
snippets={[
{ label: "cURL", code: "curl https://api.example.com/v1/customers" },
{ label: "Python", code: "requests.post(url)" },
]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
snippets | Snippet[] | - | One tab per language: label, code and optional language. |
title | string | - | Heading on the left of the tab bar. |
defaultValue | string | - | Label of the tab open at first. |
value | string | - | Controlled open tab. |
onValueChange | (label: string) => void | - | Called with the newly selected label. |
storageKey | string | - | Remember the language in localStorage. Instances sharing the key switch together. |
variables | Record<string, string> | - | Values for {{name}} placeholders in the code. |
lineNumbers | boolean | false | Show line numbers. |
bodyClassName | string | - | Classes for the scrolling code area. |
Also accepts all <div> props except defaultValue, dir and title.
The highlighter is picked from the tab label (cURL, JavaScript, TypeScript, Python, Go, JSON, HTTP, .env) unless language is set. The stored language is read after hydration, so server and client markup match.