51: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"] 52: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"] 53: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"] 54:T2632,'use client' import { useEffect, useRef, useState } from 'react' import { useControllableState } from '@radix-ui/react-use-controllable-state' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { cn } from '@/lib/utils' import { Check, ChevronDown, CircleX, Copy } from 'lucide-react' export type PackageManagerId = 'npm' | 'pnpm' | 'yarn' | 'bun' export type PackageManagerCommands = Partial> export type PackageManagerCommandProps = { commands: PackageManagerCommands value?: PackageManagerId defaultValue?: PackageManagerId onValueChange?: (value: PackageManagerId) => void /** @deprecated Use defaultValue instead. */ defaultPackageManager?: PackageManagerId className?: string commandClassName?: string align?: 'start' | 'center' | 'end' copyLabel?: string resetDelay?: number onCopySuccess?: (command: string) => void onCopyError?: (error: Error) => void } type PackageManagerMeta = { id: PackageManagerId name: string Icon: (props: React.SVGProps) => React.ReactNode } function NpmIcon(props: React.SVGProps) { return ( ) } function PnpmIcon(props: React.SVGProps) { return ( ) } function YarnIcon(props: React.SVGProps) { return ( ) } function BunIcon(props: React.SVGProps) { return ( ) } const PACKAGE_MANAGERS: readonly PackageManagerMeta[] = [ { id: 'npm', name: 'npm', Icon: NpmIcon }, { id: 'pnpm', name: 'pnpm', Icon: PnpmIcon }, { id: 'yarn', name: 'yarn', Icon: YarnIcon }, { id: 'bun', name: 'bun', Icon: BunIcon }, ] export function getAvailablePackageManagers(commands: PackageManagerCommands) { return PACKAGE_MANAGERS.filter((manager) => Boolean(commands[manager.id])) } export function PackageManagerCommand({ commands, value: valueProp, defaultValue, onValueChange, defaultPackageManager = 'npm', className, commandClassName, align = 'end', copyLabel, resetDelay = 1600, onCopySuccess, onCopyError, }: PackageManagerCommandProps) { const availablePackageManagers = getAvailablePackageManagers(commands) const fallbackPackageManager = availablePackageManagers[0] ?? PACKAGE_MANAGERS[0] const [selectedValue = fallbackPackageManager.id, setSelectedValue] = useControllableState({ prop: valueProp, defaultProp: defaultValue ?? defaultPackageManager, onChange: onValueChange, }) const selectedPackageManager = availablePackageManagers.find((item) => item.id === selectedValue) ?? fallbackPackageManager const selectedPm = selectedPackageManager.id const command = commands[selectedPm] ?? '' const SelectedIcon = selectedPackageManager.Icon const [copyState, setCopyState] = useState<'idle' | 'done' | 'error'>('idle') const resetTimeoutRef = useRef | null>(null) async function handleCopy() { if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current) try { await navigator.clipboard.writeText(command) setCopyState('done') onCopySuccess?.(command) } catch (error) { const copyError = error instanceof Error ? error : new Error('Copy failed') setCopyState('error') onCopyError?.(copyError) } resetTimeoutRef.current = setTimeout(() => { setCopyState('idle') resetTimeoutRef.current = null }, resetDelay) } useEffect(() => { return () => { if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current) } }, []) if (availablePackageManagers.length === 0) return null const copyActionLabel = copyState === 'done' ? `${selectedPackageManager.name} install command copied` : copyState === 'error' ? `Unable to copy ${selectedPackageManager.name} install command` : (copyLabel ?? `Copy ${selectedPackageManager.name} install command`) return (

{availablePackageManagers.map((pm) => { const PmIcon = pm.Icon const isSelected = pm.id === selectedPm return ( setSelectedValue(pm.id)} > {pm.name} {isSelected ? : null} ) })}

) } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","@radix-ui/react-use-controllable-state",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-use-controllable-state","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@radix-ui/react-use-controllable-state"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["button","dropdown-menu"]}]]}],["$","$L52",null,{"sourceUrl":"https://ui.navdeepsingh.dev/r/package-manager-command.json","proxyUrl":"https://shadcnregistry.com/r/navui/package-manager-command","itemId":"@navui/package-manager-command"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"components/ui/components/package-manager-command.tsx","content":"$54","type":"registry:ui","target":"@components/package-manager-command.tsx"}]}]]}],"$L55"]}]

Package Manager Command

Installation

Files

@components

Styles