Code Block Command

Display install commands with package manager switcher and copy button.

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

Loading…

"use client"
 
import { CodeBlockCommand } from "@/components/code-block-command"
 
export default function CodeBlockCommandDemo() {
  return (
    <div className="w-full max-w-md">
      <CodeBlockCommand
        prompt="Add the @ncdai/code-block-command component to my project"
        pnpm="pnpm dlx shadcn add @ncdai/code-block-command"
        yarn="yarn shadcn add @ncdai/code-block-command"
        npm="npx shadcn add @ncdai/code-block-command"
        bun="bunx --bun shadcn add @ncdai/code-block-command"
      />
    </div>
  )
}

Features

Switch between pnpm, yarn, npm, and bun with a single click.
Optional prompt tab for displaying a natural language instruction for AI agents to install packages or components.
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 @ncdai/code-block-command

Usage

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

<CodeBlockCommand
  prompt="Add the @ncdai/code-block-command component to my project"
  pnpm="pnpm dlx shadcn add @ncdai/code-block-command"
  yarn="yarn dlx shadcn add @ncdai/code-block-command"
  npm="npx shadcn add @ncdai/code-block-command"
  bun="bunx --bun shadcn add @ncdai/code-block-command"
/>

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

<CodeBlockCommand
  prompt="Add the @ncdai/code-block-command component to my project"
  {...convertNpmCommand("npx shadcn add @ncdai/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 dlx`	`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 @ncdai/code-block-command

Loading…

"use client"
 
import {
  CodeBlockCommand,
  convertNpmCommand,
} from "@/components/code-block-command"
 
export default function CodeBlockCommandConvertDemo() {
  return (
    <div className="w-full max-w-md">
      <CodeBlockCommand
        prompt="Add the @ncdai/code-block-command component to my project"
        {...convertNpmCommand("npx shadcn add @ncdai/code-block-command")}
      />
    </div>
  )
}

Analytics Tracking

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

<CodeBlockCommand
  {...convertNpmCommand("npx shadcn add @ncdai/code-block-command")}
  onCopySuccess={({ packageManager, command }) => {
    trackEvent({
      name: "command_copied",
      properties: {
        packageManager,
        command,
      },
    })
  }}
  onCopyError={(error) => {
    trackEvent({
      name: "command_copy_failed",
      properties: { error: error.message },
    })
  }}
/>

Command Palette

Code Block Command