Install Command
Compact install commands in default and prompt-toolbar layouts.
Default
A compact install command with package manager switching and copy feedback.
Toolbar
Adds provider-specific prompt copying and an optional preview link.
Install Command renders the one-line install box documentation sites need: a compact command with npm, pnpm, yarn, and bun switching plus copy feedback, and a prompt-toolbar variant for AI-assisted docs. It is a React component built with shadcn/ui and Tailwind CSS.
API reference
Install Command
| Prop | Type | Default | Description |
|---|---|---|---|
commands | Record<PackageManager, string> | — | Complete npm, pnpm, yarn, and bun commands. All four values are required. |
value | PackageManager | — | The selected package manager when the component is controlled. |
defaultValue | PackageManager | "npm" | The initial package manager when the component is uncontrolled. |
onValueChange | (value: PackageManager) => void | — | Called when the user selects a different package manager. |
className | string | — | Adds classes to the root element. |
PackageManager is the union "npm" | "pnpm" | "yarn" | "bun".
packageManagers exports those values in the same fixed order. The root also
accepts standard div attributes, except children.
Install Command Toolbar
| Prop | Type | Default | Description |
|---|---|---|---|
commands | InstallCommandCommands | — | Complete npm, pnpm, yarn, and bun commands. All four values are required. |
providers | readonly InstallCommandToolbarProvider[] | — | Prompt destinations shown in the menu. Each provider supplies a unique value, label, prompt, and optional SVG icon component. |
value | PackageManager | — | The selected package manager when the component is controlled. |
defaultValue | PackageManager | "npm" | The initial package manager when the component is uncontrolled. |
onValueChange | (value: PackageManager) => void | — | Called when the user selects a different package manager. |
previewHref | string | — | Shows a preview link that opens the supplied URL in a new tab. |
className | string | — | Adds classes to the root element. |
InstallCommandToolbarProvider keeps provider branding outside the Toolbar.
Pass the destinations and icons appropriate for your product. Provider values
must be unique. The Toolbar root also accepts standard div attributes, except
children.
Clipboard behavior
Command and prompt copying use the browser Clipboard API. Each successful copy has its own two-second feedback state. Selecting a different package manager clears the command feedback immediately without affecting prompt feedback. Long commands are visually truncated without changing the copied string. Prompt strings are copied without interpolation or parsing.
The component intentionally provides no legacy clipboard fallback. Browsers can reject clipboard access when the page is not in a secure context or when the user denies permission.
Credits
The visual direction of Install Command is inspired by Aceternity UI.