"use client" import React from 'react' import { SquareTerminal, Clipboard, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { toast } from 'sonner' import ShikiHighlighter from 'react-shiki'; import { useTheme } from 'next-themes' // Define managers for both modes const MANAGERS = { standard: [ { label: "pnpm", value: "pnpm" }, { label: "yarn", value: "yarn" }, { label: "bun", value: "bun" }, { label: "npm", value: "npm" }, ], execute: [ { label: "pnpm", value: "pnpm dlx" }, { label: "yarn", value: "yarn" }, { label: "bun", value: "bunx --bun" }, { label: "npx", value: "npx" }, ] } export const InstallCommandBox = ({ className, command, items, mode = "standard" }: { className?: string, command: string, items: string[], mode?: "standard" | "execute" }) => { const managers = MANAGERS[mode] || MANAGERS.standard const [selectedManager, setSelectedManager] = React.useState(managers[0]) const [commandCopied, setCommandCopied] = React.useState(false) // Update selectedManager if mode changes React.useEffect(() => { setSelectedManager(managers[0]) }, [mode]) const installCommand = `${selectedManager.value} ${command} ${items.join(" ")}` async function copyInstallCommand() { try { await navigator.clipboard.writeText(installCommand) setCommandCopied(true) toast.success('Copied to clipboard') setTimeout(() => setCommandCopied(false), 2000) } catch { toast.error('Failed to copy') } } const { theme, resolvedTheme } = useTheme() const currentTheme = resolvedTheme || theme return (

{managers.map((manager) => ( ))}

{installCommand}

) }

Name	Type	Default	Required	Description
className	string	-	No	Optional class name for the rendered element.
command	string	-	Yes	The command to install
items	string[]	-	Yes	The items to install
mode	'standard' \| 'execute'	standard	No	The mode to use for the command (npm or npx)

Command Palette

Install Command Box

Installation

Install Dependencies

Copy and Paste the component

Usage

Props