Code Block

A code block that makes your code look great. Pass a filename like 'Button.tsx' and it shows the right file icon automatically. Includes line numbers, diff markers for showing changes, and line highlighting to draw attention to specific code. Switch between multiple files with tabs or a dropdown. Dark mode works out of the box, and there's a copy button because you'll need it.

Code Block preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/code-block.json

npx shadcn@latest add https://www.shadcn.io/r/code-block.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/code-block.json

bunx shadcn@latest add https://www.shadcn.io/r/code-block.json

Related Components

FAQ