Code Block Command

Tabbed CLI command block with package manager switching, bundled SVG icons, copy button, and localStorage persistence.

lucide-react

$ shadcn add button

$ pnpm dlx shadcn@latest add button

$ pnpm dlx shadcn@latest add button

Installation

$ shadcn add @jalco/code-block-command

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

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

shadcn add

$ shadcn add button

npm install

$ pnpm add zod

npx create

$ pnpm create next-app@latest

Provide commands manually if the automatic conversion isn't suitable.

Custom mapping

$ pnpm dev

PropType

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.
Bundled icons. Package manager icons are bundled directly in the component — no API calls or setup required. Use the icons prop to override any icon with a custom ReactNode.
Icon library. Uses Lucide icons by default. Since this is copy-paste code, you can swap the imports if your project uses a different icon library.