Components
Code Block
Tabbed code panel with animated line reveal and a copy-to-clipboard action.
Preview
Component
Tabbed Code Block
Minimal code panel with tab switching, animated line reveal, and a lightweight copy action.
Switch tabs to swap the code sample and replay the reveal animation
export function Terminal() {return (<div className="border border-foreground/10"><span>workflow.ts</span></div>);}
Usage
import {
CodeBlock,
type CodeBlockExample,
} from "@/components/ui/code-block";
const codeExamples = [
{
label: "terminal.tsx",
code: `export function Terminal() {
return <div>workflow.ts</div>;
}`,
},
] satisfies ReadonlyArray<CodeBlockExample>;
<CodeBlock codeExamples={codeExamples} />Props
CodeBlock
| Prop | Type | Default | Description |
|---|---|---|---|
codeExamples | ReadonlyArray<{ label: string; code: string }> | Required | Code tabs rendered in the header and code panel. |
initialTab | number | 0 | Zero-based tab index used for the initial active code example. |
isVisible | boolean | true | Controls the outer slide-and-fade entrance state. |
className | string | — | Optional classes applied to the outer wrapper. |