Code Block Command

Tabbed CLI command block with package manager switching (pnpm, yarn, npm, bun, shadcn), SVG icons, copy button, and localStorage persistence. Remembers the user's preferred package manager across visits.

lucide-react

Preview

$ shadcn add button

Installation

$ shadcn add https://ui.justinlevine.me/r/code-block-command.json

Usage

import { CodeBlockCommand } from "@/components/code-block-command"

import { convertNpmCommand } from "@/lib/convert-npm-command"

<CodeBlockCommand {...convertNpmCommand("npm install zod")} />

Client component. Uses localStorage to persist the selected package manager across visits. Use the convertNpmCommand helper to generate equivalent commands for all managers from a single npm command.

Examples

Command types

shadcn add

$ shadcn add button

npm install

$ pnpm add zod

npx create

$ pnpm create next-app@latest

npm run

$ pnpm dev

Icon styles

Colored (default)

$ pnpm add zod

Muted

$ pnpm add zod

No Icons

$ pnpm add zod

Filtered tabs

pnpm + npm only

$ pnpm add zod

shadcn + bun only

$ shadcn add button

API Reference

CodeBlockCommand

PropType

Notes

convertNpmCommand helper. Pass a single npm/npx command and get all 5 package manager equivalents automatically. Handles shadcn, create, install, run, and generic npx commands.
Icons via SVGL. Package manager icons are fetched from the SVGL API at build time. Use fetchPackageManagerIcons() in a server component and pass the result as the icons prop.