CodeBlock

Displays formatted code with syntax highlighting and copy to clipboard.

Basic

Renders a dark code block with a copy-to-clipboard button. The default language is tsx.

import { Button } from '@venator-ui/ui';

export function Example() {
return <Button variant="primary">Click me</Button>;
}

<CodeBlock className="mt-6"
code={`import { Button } from '@venator-ui/ui';

export function Example() {
return <Button variant="primary">Click me</Button>;
}`}
/>

With filename

Pass filename to show a label bar above the code. The top corners of the code block become square to connect with the bar.

Button.tsx

export interface ButtonProps {
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
isLoading?: boolean;
}

<CodeBlock className="mt-6"
filename="Button.tsx"
code={`export interface ButtonProps {
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
isLoading?: boolean;
}`}
/>

Bash

Set language="bash" for shell commands.

Terminal

npm install @venator-ui/ui @venator-ui/patterns @venator-ui/tokens

<CodeBlock className="mt-6"
language="bash"
filename="Terminal"
code={`npm install @venator-ui/ui @venator-ui/patterns @venator-ui/tokens`}
/>

Props

Prop	Type	Default	Description
`code`	`string`	—	The source code string to display
`language`	`string`	`'tsx'`	Language hint applied as a language-* class on <code>
`filename`	`string`	—	When provided, renders a filename bar above the code block