design-infraReport a problem or share feedback← Catalog
Code Block
curatedtheme-awarefreekibo-ui/code-block
Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
drop-inTechnicalTrustworthy
$
npx shadcn@latest add @kibo-ui/code-blocknpm deps: @radix-ui/react-use-controllable-state, @shikijs/transformers, lucide-react, react-icons, shiki
Our notes
Shiki code block with tabs, line numbers, highlight/diff/focus transformers and copy. Theme-aware chrome; diff colours are semantic emerald/rose. Heavy: shiki + react-icons.- Source
- Kibo UI
- Kind
- component
- Categories
- code
- Use as
- drop-in — replaces your component
- Applies to
- code
- Motion
- not tagged (static or unknown)
- Licence
- MIT (shadcnblocks/kibo, originally Hayden Bleasel). Premium blocks are sold at shadcnblocks.com — not catalogued.
- Live demo
- www.kibo-ui.com
- Docs
- www.kibo-ui.com
Similar
Compare all 4 →- Qr Codekibo-ui/qr-codeQR code (qrcode lib) that reads --foreground/--background at runtime — but only parses oklch() values; our DESIGN.md themes emit hex, so it silently falls back to near-black/white. Pass foreground/background props. Server variant included.
- Snippetkibo-ui/snippetTabbed install-command snippet with copy (npm/pnpm/bun). Ideal for dev-tool landing pages.
- Code Blockaceternity/code-blockSyntax-highlighted block with tabs (react-syntax-highlighter).