Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProPackage-manager tabs for a CLI command (pnpm, npm, yarn, bun) with a copy button. Remembers the reader's choice and keeps every instance on the page in sync.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { InstallTabs } from "@/components/ui/install-tabs"<InstallTabs command="shadcn@latest add button" storageKey="pm" /><InstallTabs
commands={{
npm: "npm install motion",
pnpm: "pnpm add motion",
yarn: "yarn add motion",
}}
/>| Prop | Type | Default | Description |
|---|---|---|---|
command | string | - | Command run through each manager's runner (pnpm dlx, npx, yarn dlx, bunx). |
commands | Partial<Record<PackageManager, string>> | - | Explicit command per manager. Overrides command; only listed managers get a tab. |
defaultValue | "pnpm" | "npm" | "yarn" | "bun" | "pnpm" | Tab selected before any stored preference is read. |
value | PackageManager | - | Controlled selected manager. |
onValueChange | (manager: PackageManager) => void | - | Called when the reader picks another manager. |
storageKey | string | - | Remembers the choice in localStorage and syncs every instance using the same key. |
Also accepts all <div> props except defaultValue and dir.
packageManagerRunners.