CodeBlock
v1.0.0A tabbed code display component that toggles between a live preview and highlighted source code with copy support.
Examples
Basic usage
With icons and content
With complex children
ActiveStatus indicator
Multiple code blocks
$ npm install framer-motion class-variance-authority
import { Button } from "@/components/button";
API
All available props for the CodeBlock component.
Property | Type | Default | Description |
|---|---|---|---|
| code | string | required | The source code shown in the Code tab. |
| language | string | "tsx" | Language for syntax highlighting (tsx, jsx, bash, etc.). |
| children | ReactNode | — | Content rendered in the Preview tab. |
| showLineNumbers | boolean | false | Shows line numbers in the code view. |
| fileName | string | — | File name shown in the code header. |
| variant | "modern" | "minimal" | "modern" | Visual style variant. |
| tab | "preview" | "code" | — | Controlled active tab. |
| onTabChange | (tab) => void | — | Callback when the active tab changes. |