React AI Code Block

Code Block preview

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.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this AI component for you — no copy-paste, no CLI:

use shadcnio to install the code-block AI component into my project

Related Components

FAQ