Code Block Command

Display install commands with package manager switcher and copy button.

$ pnpm dlx shadcn add @ehtisham/code-block-command

Loading…

import { CodeBlockCommand } from "@/components/code-block-command"
 
export default function CodeBlockCommandDemo() {
  return (
    <div className="w-full max-w-md">
      <CodeBlockCommand
        pnpm="pnpm dlx shadcn add @ehtisham/code-block-command"
        yarn="yarn shadcn add @ehtisham/code-block-command"
        npm="npx shadcn add @ehtisham/code-block-command"
        bun="bunx --bun shadcn add @ehtisham/code-block-command"
      />
    </div>
  )
}

Features

Switch between pnpm, yarn, npm, and bun with a single click.
Automatically saves the user's preferred package manager for future visits.
Copy commands instantly with smooth animations showing success or failure states.
convertNpmCommand utility to auto-convert a standard npm command to all package managers.

Installation

$ pnpm dlx shadcn@latest add @ehtisham/code-block-command

Usage

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

<CodeBlockCommand
  pnpm="pnpm dlx shadcn add @ehtisham/code-block-command"
  yarn="yarn shadcn add @ehtisham/code-block-command"
  npm="npx shadcn add @ehtisham/code-block-command"
  bun="bunx --bun shadcn add @ehtisham/code-block-command"
/>

Or use convertNpmCommand to auto-convert from a standard npm command:

<CodeBlockCommand
  {...convertNpmCommand("npx shadcn add @ehtisham/code-block-command")}
/>

API Reference

CodeBlockCommand

Prop

Type

convertNpmCommand

Converts a standard npm/npx command into equivalent commands for all package managers. The result can be spread directly into CodeBlockCommand props.

Prop

Type

Supported command patterns:

npm command	pnpm	yarn	bun
`npm install`	`pnpm add`	`yarn add`	`bun add`
`npx create-<name>`	`pnpm create <name>`	`yarn create <name>`	`bunx --bun create-<name>`
`npm create`	`pnpm create`	`yarn create`	`bun create`
`npx`	`pnpm dlx`	`yarn`	`bunx --bun`
`npm run`	`pnpm`	`yarn`	`bun`

Examples

Convert from npm

Use convertNpmCommand to avoid manually writing commands for each package manager.

$ pnpm dlx shadcn add @ehtisham/code-block-command

Loading…

import {
  CodeBlockCommand,
  convertNpmCommand,
} from "@/components/code-block-command"
 
export default function CodeBlockCommandConvertDemo() {
  return (
    <div className="w-full max-w-md">
      <CodeBlockCommand
        {...convertNpmCommand("npx shadcn add @ehtisham/code-block-command")}
      />
    </div>
  )
}

Analytics Tracking

Track user interactions with analytics services like PostHog, OpenPanel, or Google Analytics.

"use client"
 
import {
  CodeBlockCommand,
  convertNpmCommand,
} from "@/components/code-block-command"
import { trackEvent } from "@/lib/events"
 
export function InstallCommand() {
  return (
    <CodeBlockCommand
      {...convertNpmCommand("npx shadcn add @ehtisham/code-block-command")}
      onCopySuccess={({ packageManager, command }) => {
        trackEvent({
          name: "command_copied",
          properties: {
            packageManager,
            command,
          },
        })
      }}
      onCopyError={(error) => {
        trackEvent({
          name: "command_copy_failed",
          properties: { error: error.message },
        })
      }}
    />
  )
}