Custom Code Block

A beautiful, robust code block component with manual syntax highlighting, automatic language icons, and clipboard copy functionality.

This CustomCodeBlock provides an elegant interface to display code snippets, complete with macOS-style window controls, dynamic language badges, and a custom syntax highlighter optimized for both light and dark themes.

Every block ships with macOS window controls, a language badge derived from language, and a copy button.

Code block

Passcode: as the raw source string — the block does not read children.
language: drives both the highlighter and the header icon. Defaults to typescript.
fileName: is the label shown beside that icon.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Custom Code Block

npx shadcn@latest add @algorize-ui/custom-code-block

components/custom/blocks/CustomCodeBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Custom Code Block needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

TypeScript

Setlanguage"tsx": — or "ts" — for TypeScript highlighting and the matching badge.

Shell commands

Setlanguage"bash": to swap the badge for a terminal icon and dim comment lines.

Multiple files

Passtabs: instead of code to group related files behind a switcher in one block.

Features

Explore the Custom Code Block's syntax highlighting features, complete with copy-to-clipboard functionality and line numbering.

No Highlighting Library

Uses a lightweight, custom regex engine for syntax highlighting. No need to install heavy libraries like PrismJS or Shiki.

Language Badges

Automatically displays the correct language icon (React, JS, TS, HTML, CSS, Bash) in the macOS-style header.

Clipboard Copy

Includes a built-in copy button with a temporary success state (checkmark) for an excellent developer experience.

Dark Mode Ready

The syntax highlighter colors are carefully chosen to look gorgeous on both light and dark backgrounds.

Best Practices & Guidelines

Language Prop Mapping

Make sure to pass the correct language prop (e.g., "tsx", "bash", "css"). This prop drives both the regex syntax highlighting engine and the language icon rendered in the header.

Props Reference

Component	Prop	Type	Default	Description
`CustomCodeBlock`	`code`	`string`	-	The raw code string to display.
`CustomCodeBlock`	`language`	`string`	`"typescript"`	The programming language for syntax highlighting (e.g. "javascript", "tsx", "html", "bash").
`CustomCodeBlock`	`fileName`	`string`	-	Optional custom file name to display in the header (e.g. "app.tsx").