Command Box

Multi-package-manager command snippet box with fluid tab transitions, blur reveal, and one-click copy feedback.

bunx --bun shadcn@latest add @ashutoshdm1/command-box

1import { CommandBox } from "@/components/command-box";
2 
3export default function CommandBoxDemo() {
4  return (
5    <div className="w-full max-w-xl mx-auto py-6">
6      <CommandBox
7        baseCommand="shadcn@latest add @ashutoshdm1/command-box"
8        showPrompt={true}
9      />
10    </div>
11  );
12}

Installation

bunx --bun shadcn@latest add https://ashutoshtiwari.me/r/command-box.json

Usage

1import { CommandBox } from "@/components/command-box"

1<CommandBox baseCommand="shadcn@latest add @ashutoshdm1/command-box" />

API Reference

Prop	Type	Default	Description
`baseCommand`	string	undefined	Standard command suffix appended to package manager runners (e.g. 'shadcn@latest add ...').
`commands`	CommandConfigMap	undefined	Explicit map of command configurations keyed by package manager ('bun', 'pnpm', 'yarn', 'npm').
`commandGenerator`	(pm: PackageManager) => CommandItem	undefined	Function to dynamically generate command items per package manager.
`packageManagers`	PackageManager[]	["bun", "pnpm", "yarn", "npm"]	List of package managers to show in the switcher tabs.
`defaultPackageManager`	PackageManager	"bun"	Initially active package manager tab.
`showPrompt`	boolean	false	Whether to display a terminal dollar sign ($) before the command text.
`copySuccessMessage`	string	"Command copied to clipboard"	Toast notification message displayed when the command is copied.
`title`	React.ReactNode	undefined	Header title displayed above the command box.
`description`	React.ReactNode	undefined	Header description text displayed above the command box.
`showHeader`	boolean	true	Controls whether the title and description header is displayed.
`className`	string	""	Additional CSS classes applied to the container element.