4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T3634,"use client" import { useMemo } from "react" import { ScrollArea } from "@base-ui/react/scroll-area" import { useAtom } from "jotai" import { atomWithStorage } from "jotai/utils" import { cn } from "@/lib/utils" import { Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, } from "@/components/base/ui/tabs" import { CopyButton } from "@/registry/components/copy-button" import { IconSwap, IconSwapItem } from "@/registry/components/icon-swap" import { IconPlaceholder } from "@/registry/icons/icon-placeholder" export type PackageManager = "prompt" | "pnpm" | "yarn" | "npm" | "bun" const packageManagerAtom = atomWithStorage( "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 (

) })} { onCopySuccess?.({ packageManager, command: copiedCommand, }) }} onCopyError={onCopyError} />

) } function getIconForPackageManager(manager: PackageManager) { switch (manager) { case "prompt": return ( ) 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

Code Block Command

Installation

Files

@components

Styles