Terminal Snippet

A beautiful, dependency-free code display block inspired by Mac OS windows.

If you are building a documentation site, a developer portfolio, or writing technical blog posts, you need a sleek way to present code. This TerminalBlock handles the structural styling, Mac-like window controls, built-in "Copy to Clipboard" functionality, and dynamic language badging without relying on heavy third-party syntax highlighters.

Pass a raw code string and the block handles the window chrome, language badge, overflow scrolling and copy button.

Terminal

Mac-style window controls, a language badge and a copy button, all from one string.

Passcode: as the whole snippet — newlines in the string become terminal lines.
copyable: is on by default and renders the copy button.

Accent Color

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 Terminal

npx shadcn@latest add @algorize-ui/terminal

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

Install dependencies

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

Examples

Any language

language"python": sets the badge and highlighting. Defaults to bash; the block ships no heavyweight highlighter, so any string is safe.
filename: is the label beside the badge.

Glass

Setvariant"glass": to blur whatever sits behind the window — ideal over imagery.

Minimal

Setvariant"minimal": to strip the chrome down to the code itself.

Without header controls

Omitfilename: and set copyable={false} for a bare, read-only block.

Props Reference

Component	Prop	Type	Default	Description
`TerminalBlock`	`code`	`string`	`Required`	The snippet rendered inside the window. Newlines in the string become terminal lines.
`TerminalBlock`	`language`	`string`	`"bash"`	Drives the syntax highlighting and the badge shown in the header.
`TerminalBlock`	`filename`	`string`	`undefined`	Label beside the badge. Omit it and the header keeps only the window controls.
`TerminalBlock`	`copyable`	`boolean`	`true`	Renders the copy button. Set it false for a read-only block.
`TerminalBlock`	`variant`	`"default" \| "glass" \| "minimal"`	`"default"`	Surface treatment of the window chrome.
`TerminalBlock`	`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"primary"`	Accent for the language badge and border. Unrecognised values fall back to `"primary"`.