React AI Code Block

If your AI generates code (and let's be honest, that's like 90% of what people use AI for), you need a solid code block. This one uses Shiki under the hood, so you get proper syntax highlighting for pretty much any language—TypeScript, Python, Rust, whatever. It handles dark mode automatically by rendering both themes and showing the right one based on your app's theme class. There's a copy button built in because obviously users want to copy the code. The highlighting is async so it won't block rendering while Shiki does its thing, which matters a lot when you're streaming code in real-time. Just pass your code and language, and it looks good.

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