# Code Block Command
Display install commands with package manager switcher and copy button.
```tsx
"use client"
import { CodeBlockCommand } from "@/components/code-block-command"
export default function CodeBlockCommandDemo() {
return (
)
}
```
## 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
```bash
npx shadcn@latest add @ncdai/code-block-command
```
Install the following dependencies
```bash
npm install clsx tailwind-merge class-variance-authority lucide-react motion jotai radix-ui @base-ui/react
```
Add a cn helper
```ts title="lib/utils.ts"
import type { ClassValue } from "clsx"
import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs))
}
export function absoluteUrl(path: string) {
return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
}
```
Install the required components
* [Copy Button](https://chanhdai.com/components/copy-button)
Copy and paste the following code into your project
```tsx title="components/tabs.tsx"
"use client"
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
import { cn } from "@/lib/utils"
function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
return (
(
"packageManager",
"pnpm"
)
export function usePackageManager() {
return useAtom(packageManagerAtom)
}
/**
* Props for the CodeBlockCommand component.
*/
export type CodeBlockCommandProps = {
/**
* Natural language instruction for AI agents to install a package or component.
*/
prompt?: string
/**
* Command to execute with pnpm package manager.
*/
pnpm?: string
/**
* Command to execute with yarn package manager.
*/
yarn?: string
/**
* Command to execute with npm package manager.
*/
npm?: string
/**
* Command to execute with bun package manager.
*/
bun?: string
/**
* Callback invoked when a command is successfully copied to clipboard.
*
* Receives an object containing the selected package manager and the copied command text.
* Useful for tracking user interactions or showing custom success notifications.
*
* @param data - Object containing copy operation details
* @param data.packageManager - The package manager that was selected when copying
* @param data.command - The actual command text that was copied
*
* @example
* ```tsx
* {
* console.log(`Copied ${command} for ${packageManager}`)
* }}
* />
* ```
*/
onCopySuccess?: (data: {
packageManager: PackageManager
command: string
}) => void
/**
* Callback invoked when copying to clipboard fails.
*
* Receives the error object for debugging or showing custom error messages.
*
* @param error - The error that occurred during the copy operation
*
* @example
* ```tsx
* {
* console.error('Copy failed:', error)
* }}
* />
* ```
*/
onCopyError?: (error: Error) => void
}
export function CodeBlockCommand({
prompt,
pnpm,
yarn,
npm,
bun,
onCopySuccess,
onCopyError,
}: CodeBlockCommandProps) {
const [packageManager, setPackageManager] = usePackageManager()
const tabs = useMemo(() => {
return {
prompt,
pnpm,
yarn,
npm,
bun,
}
}, [prompt, pnpm, yarn, npm, bun])
const tabsFiltered = useMemo(
() => Object.entries(tabs).filter(([, value]) => !!value),
[tabs]
)
return (
{
setPackageManager(value as PackageManager)
}}
>
{getIconForPackageManager(packageManager)}
{tabsFiltered.map(([key]) => {
return (
{key}
)
})}
{tabsFiltered.map(([key, value]) => {
return (
${" "}
{value}
)
})}
{
onCopySuccess?.({
packageManager,
command: copiedCommand,
})
}}
onCopyError={onCopyError}
/>
)
}
function getIconForPackageManager(manager: PackageManager) {
switch (manager) {
case "prompt":
return (
)
case "yarn":
return (
)
case "npm":
return (
)
case "bun":
return (
)
default:
return (
` -> add commands for each manager
* - `npx create-` -> create commands for each manager
* - `npm create ` -> create commands for each manager
* - `npx ` -> execute commands for each manager
* - `npm run