Package Manager Tabs
A CLI command block with a package manager switcher. Supports npm, pnpm, yarn, and bun with per-manager commands and a one-click copy button.
Features
- Switches between npm, pnpm, yarn, and bun with a single click.
- Active package manager icon updates in real time.
- Lightweight command colorizer — no syntax highlighter dependency.
- One-click copy button on every command.
- Fully controlled via a commands prop — no magic string templates.
Installation
1
Run the shadcn CLI command
npx shadcn@latest add @lalit/package-manager-tabsnpx shadcn@latest add @lalit/package-manager-tabspnpm dlx shadcn@latest add @lalit/package-manager-tabspnpm dlx shadcn@latest add @lalit/package-manager-tabsnpx shadcn@latest add @lalit/package-manager-tabsnpx shadcn@latest add @lalit/package-manager-tabsbunx shadcn@latest add @lalit/package-manager-tabsbunx shadcn@latest add @lalit/package-manager-tabsThis installs the component directly. Update import paths to match your setup.
Usage
import { PackageManagerTabs } from '@/components/ui/package-manager-tabs'
export function Example() {
return (
<PackageManagerTabs
commands={{
npm: 'npx shadcn@latest add @lalit/copy-button',
pnpm: 'pnpm dlx shadcn@latest add @lalit/copy-button',
yarn: 'npx shadcn@latest add @lalit/copy-button',
bun: 'bunx shadcn@latest add @lalit/copy-button',
}}
/>
)
}
import { PackageManagerTabs } from '@/components/ui/package-manager-tabs'
export function Example() {
return (
<PackageManagerTabs
commands={{
npm: 'npx shadcn@latest add @lalit/copy-button',
pnpm: 'pnpm dlx shadcn@latest add @lalit/copy-button',
yarn: 'npx shadcn@latest add @lalit/copy-button',
bun: 'bunx shadcn@latest add @lalit/copy-button',
}}
/>
)
}
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
commands* | Commands | — | Per-package-manager command strings. Keys: npm, pnpm, yarn, bun. |
variant | "default" | "glass" | "default" | Visual style. "glass" renders a frosted-glass surface with backdrop blur, optimised for both light and dark modes. |
className | string | — | Additional classes for the root wrapper. |