# Code Block Command Display install commands with package manager switcher and copy button. ```tsx import { CodeBlockCommand } from "@/components/code-block-command" export function CodeBlockCommandDemo() { return (
) } ``` ## 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 ```bash npx shadcn 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" showLineNumbers import type { ClassValue } from "clsx" import { clsx } from "clsx" import { twMerge } from "tailwind-merge" export const cn = (...inputs: ClassValue[]) => { return twMerge(clsx(inputs)) } ``` 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" showLineNumbers "use client" import { Tabs as TabsPrimitive } from "@base-ui/react/tabs" import { cn } from "@/lib/utils" function Tabs({ className, ...props }: TabsPrimitive.Root.Props) { return ( ) } function TabsList({ className, ...props }: TabsPrimitive.List.Props) { return ( ) } function TabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props) { return ( ) } function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) { return ( ) } function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) { return ( ) } export { Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger } ``` ```ts title="hooks/use-package-manager.ts" showLineNumbers import { useAtom } from "jotai" import { atomWithStorage } from "jotai/utils" export type PackageManager = "pnpm" | "yarn" | "npm" | "bun" const packageManagerAtom = atomWithStorage( "packageManager", "pnpm" ) export function usePackageManager() { return useAtom(packageManagerAtom) } ``` ````tsx title="components/code-block-command.tsx" showLineNumbers "use client" import { TerminalSquareIcon } from "lucide-react" import { useMemo } from "react" import { Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, } from "@/components/tabs" import { type PackageManager, usePackageManager, } from "@/hooks/use-package-manager" import { CopyButton } from "@/components/copy-button" /** * Props for the CodeBlockCommand component. */ export type CodeBlockCommandProps = { /** * 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({ pnpm, yarn, npm, bun, onCopySuccess, onCopyError, }: CodeBlockCommandProps) { const [packageManager, setPackageManager] = usePackageManager() const tabs = useMemo(() => { return { pnpm: pnpm, yarn: yarn, npm: npm, bun: bun, } }, [pnpm, yarn, npm, bun]) return (
{ setPackageManager(value as PackageManager) }} >
{getIconForPackageManager(packageManager)} {Object.entries(tabs).map(([key]) => { return ( {key} ) })}
{Object.entries(tabs).map(([key, value]) => { return ( 
                      
                        $ 
                        {value}
) })} { onCopySuccess?.({ packageManager, command: copiedCommand, }) }} onCopyError={onCopyError} />
) } function getIconForPackageManager(manager: PackageManager) { switch (manager) { case "pnpm": return ( ) case "yarn": return ( ) case "npm": return ( ) case "bun": return ( ) default: return } } /** * Result of converting an npm command to all package managers. */ export type ConvertNpmCommandResult = { /** * Command for pnpm package manager. */ pnpm: string /** * Command for yarn package manager. */ yarn: string /** * Command for npm package manager. */ npm: string /** * Command for bun package manager. */ bun: string } /** * Converts a standard npm command into equivalent commands for pnpm, yarn, npm, * and bun. The result can be spread directly into `CodeBlockCommand` props. * * Supported command patterns: * - `npm install ` -> 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