Shadcn.io is not affiliated with official shadcn/ui
Code Block
Beautiful code blocks with syntax highlighting, file icons, and copy button for React
Code Block preview
Scroll to load preview
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.
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 component for you — no copy-paste, no CLI:
use shadcnio to install the code-block component into my projectRelated Components
FAQ
Was this page helpful?
Sign in to leave feedback.