Code block
Present code with legible hierarchy and copy access.
pnpm dlx shadcn@latest add @uiarc/code-blockLive · keyboard ready
- Documentation snippets and install commands with a copy button.
- Long files that should collapse to a few lines with Show all, via maxLines.
- Use copy-button alone for a one-line value such as an API key.
- Use text-stream for code arriving from an AI response in progress.
- Use a full highlighter library when you need many languages.
Installation
Add Code block with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/code-blockAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { CodeBlock } from "@/registry/components/code-block/code-block"; const snippet = `export function hello() { return "world";}`; export function Example() { return <CodeBlock code={snippet} filename="hello.ts" language="ts" maxLines={12} />;}CodeBlock
A source viewer with filename header, light syntax highlighting, copy button, and optional collapse.
PropTypeDefaultDescription
codeRequiredstring–Source shown and copied.filenamestring–File name in the header. Defaults to "Source code".languagestring"tsx"Header label and highlighter mode.maxLinesnumber–Collapses longer sources to this many lines with a Show all toggle.- Tab
- Focuses the copy button, the scrollable source, and the expand toggle.
- EnterorSpace
- Copies the code or toggles the expanded state.
- The block is a section labelled like "hello.ts source code"; the pre is focusable so keyboard users can scroll it.
- The expand toggle uses aria-expanded and aria-controls pointing at the source.
- Copy feedback comes from copy-button.
- Expanding or collapsing springs the source height; new code fades up in place.
- The toggle label rolls and its chevron rotates.
- Reduced motion snaps height and swaps text without movement.
- Long lines scroll horizontally inside the block, never the page.
- Below 420px the padding and font shrink and the copy button becomes icon-only.
- The built-in highlighter is a small regex pass with no language bundles.
- ResizeObservers measure the source for the height spring; many blocks on one page each run their own.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for documentation snippets and install commands. The highlighter is lightweight; use a full highlighter for many languages.
- Set maxLines for long files so pages stay scannable.
The full library index for assistants is at /llms.txt.