Code Blocks

shadcn registry of 30 items for syntax-highlighted code blocks

Tier A · StrongRegistryBlock CollectionComponent Librarycode-blocks.pheralb.dev

(Visit code-blocks.pheralb.dev ↗)(Docs)(Repository)(Registry)

Preview image from code-blocks.pheralb.dev

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.

Install

pnpm dlx shadcn@latest add https://code-blocks.pheralb.dev/r/client-shiki.json

For an agent

Reach 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.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: React, Next.js
Styling: Tailwind CSS
Distribution: shadcn registry, Copy-paste snippet, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Machine-readable registry item, CLI installable, Copy-paste ready code, Structured documentation, Readable open source
Accessibility: Unknown
Maturity: Actively maintained
GitHub stars: 148

Components it ships

30 total

Code Block Copy Button Diff View Tabs Select Text Effect

Helps you build

API Documentation Blog Post Changelog

Notable for

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

Provenance

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)

Also in Component Libraries

code-blocks.pheralb.devTier A