components

Package Manager Command

Display npm, pnpm, Yarn, and Bun install commands with animated switching and one-click copy.

Live Preview
Loading…

Installation

$ pnpm dlx shadcn@latest add https://themainakb.com/r/package-manager-command.json

Features

  • Automatic Command Conversion — Generate equivalent commands for pnpm, Yarn, npm, and Bun from a single npm command.
  • Custom Command Support — Provide your own commands for each package manager when automatic conversion isn't enough.
  • Persistent Preference — Remembers the selected package manager across page reloads using local storage.
  • Animated Transitions — Smoothly animates command changes when switching between package managers.
  • Built-in Copy Button — Copy the displayed command to the clipboard with a single click.

Usage

import { PackageManagerCommand } from "@/components/package-manager-command";
<PackageManagerCommand npmCommand="npm run dev"/>