Code Block

Code that actually looks good. Shiki highlighting with 70+ auto-detected file icons—drop in a filename and it shows the React, Docker, or Prisma icon automatically. Line numbers, diff markers (+/-), highlighted regions, focused lines with blur—all the features you'd expect from modern docs. Multi-file blocks with dropdown switching. Dark mode just works. The copy button that every code block needs. Perfect for documentation, tutorials, or anywhere you're showing code.

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