Code Block
A syntax-highlighted code block with a copy button, a built-in lightweight tokenizer, and a line-by-line reveal animation.
A zero-dependency syntax-highlighted code block: it ships its own regex tokenizer (no shiki or prism required) and supports a filename header bar, line numbers, highlighting specific lines, one-click copy, and a line-by-line staggered fade in.
Loading preview…
npx shadcn@latest add https://webberui.com/r/code-block.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<CodeBlock />
Installation
npx shadcn@latest add https://webberui.com/r/code-block.jsonOr, once registries are configured in components.json, install it as @webberui/code-block.
Usage
import { CodeBlock } from "@/components/ui/code-block";
<CodeBlock
code={`const hello = "world";`}
language="tsx"
filename="example.tsx"
showLineNumbers
/>Supported language keywords: tsx, jsx, ts, js, python, bash, css, json, html. An unknown language falls back to a generic mode that still highlights strings, comments, and numbers.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
code | string | — | The code string to display |
language | string | "tsx" | Language tag, which decides the keyword and comment syntax |
filename | string | — | Filename/title shown on the left of the header bar |
showLineNumbers | boolean | false | Whether to show line numbers |
highlightLines | number[] | [] | Line numbers to highlight (1-based), given a background tint |
copy | boolean | true | Whether to show the copy button |
traffic | boolean | false | Show macOS-style red/yellow/green dots in the header bar |
animate | boolean | true | Stagger a line-by-line fade in when it enters the viewport |
maxHeight | number | — | Maximum height of the content area (px); beyond it, the area scrolls |
Accessibility
- When the user has "reduce motion" enabled at the system level, it renders statically without applying the line-by-line animation
- The copy button carries an
aria-label, and after a successful copy it transitions smoothly between the copy and check icons - The first render matches SSR and the animation is only enabled after mount, which avoids a hydration mismatch