Code Blocks
shadcn registry of 30 items for syntax-highlighted code blocks
A shadcn-compatible registry by pheralb that gives you everything around a code block rather than a single component. Its registry.json exposes 30 items: client and MDX code-block components for three highlighters (Shiki, Sugar High, Prism.js), a copy button, an animated text-morph, five composed blocks (inline code, copy-with-text-morph, package-manager select, package-manager tabs, multi-tabs), and 14 supporting libs and CSS files including Shiki transformers for line numbers, word wrap, line anchors, diff and focus notations, and pre-element attributes. You install only the variant you need by URL, so a docs site that uses Shiki never pulls Prism. Built for anyone writing documentation, a blog or a changelog in React or MDX.
pnpm dlx shadcn@latest add https://code-blocks.pheralb.dev/r/client-shiki.jsonReach for this instead of hand-wiring Shiki when the ask is a docs or blog surface, because the fiddly parts are already registry items: the package-manager tabs block, line anchors for deep links, and the diff and focus notation transformers are each an afternoon you skip. Decide the highlighter first - Shiki for build-time and full transformer support, Sugar High for the smallest client bundle, Prism.js only for legacy parity - then add just that variant's JSON, since installing several drags in three highlighters and three CSS files. Prerequisites are real and not installed for you: clsx, tailwind-merge, lucide-react, @react-symbols/icons and @base-ui/react, plus a shadcn init, and the package-manager store needs Zustand.
Why it is here. Code blocks are the one component every docs site rebuilds badly, and this is the rare registry that treats the transformers and copy affordances as first-class items rather than an example snippet.
- 30-item public shadcn registry
- three interchangeable highlighters
- Shiki transformers for diff, focus and line anchors
- package-manager tabs and select blocks
- install one variant by URL
Verified 2026-08-15. HTTP 200. https://code-blocks.pheralb.dev/, https://code-blocks.pheralb.dev/r/registry.json (all 30 item names and types enumerated), https://code-blocks.pheralb.dev/docs (sidebar and prerequisites), https://github.com/pheralb/code-blocks (148 stars, MIT, 494 commits on main)
