Code Block Command

A code block command component for displaying installation commands with copy functionality.

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

import { CodeBlockCommand } from "@/components/ncdai/code-block-command"
 
export function CodeBlockCommandDemo() {
  return (
    <div className="w-full max-w-md">
      <CodeBlockCommand
        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.
Automatically saves the user's preferred package manager for future visits.
Copy commands instantly with smooth animations showing success or failure states.

Installation

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

Usage

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

<CodeBlockCommand
  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"
/>

API Reference

Props

Prop	Type	Description
`pnpm`	`string`	Command for pnpm package manager
`yarn`	`string`	Command for yarn package manager
`npm`	`string`	Command for npm package manager
`bun`	`string`	Command for bun package manager
`onCopy`	`(data: { packageManager: PackageManager; command: string }) => void`	Callback when command is successfully copied to clipboard
`onCopyError`	`(error: Error) => void`	Callback when copy operation fails

Types

type PackageManager = "pnpm" | "yarn" | "npm" | "bun"

Examples

Analytics Tracking

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

"use client"
 
import { CodeBlockCommand } from "@/components/ncdai/code-block-command"
import { trackEvent } from "@/lib/events"
 
export function InstallCommand() {
  return (
    <CodeBlockCommand
      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"
      onCopy={({ packageManager, command }) => {
        trackEvent({
          name: "command_copied",
          properties: {
            packageManager,
            command,
          },
        })
      }}
      onCopyError={(error) => {
        trackEvent({
          name: "command_copy_failed",
          properties: { error: error.message },
        })
      }}
    />
  )
}