Package command

Display install and executable commands that adapt to the reader's preferred package manager.

Usage

Pass a package name to PackageCommand. It generates commands for npm, pnpm, Yarn, and Bun, then remembers the reader's selection across every command on the site.

npm install @intentui/disclosure-group
<PackageCommand command="@intentui/disclosure-group" />

The component also accepts a complete package-manager command and removes its original prefix before generating the alternatives.

npm install @intentui/disclosure-group

Executable commands

Commands beginning with npx, pnpm dlx, yarn dlx, or bunx are detected as executable commands.

npx shadcn@latest add @intentui/disclosure-group
<PackageCommand command="npx shadcn@latest add @intentui/disclosure-group" />

Mode

Set mode when automatic detection is ambiguous or when the command's intent should be explicit.

ValueBehavior
autoDetect an install or executable command.
installGenerate an installation command for each package manager.
execGenerate an executable command for each package manager.
<PackageCommand command="motion" mode="install" />
<PackageCommand command="shadcn@latest init" mode="exec" />

Shared preference

Selecting a package manager updates every PackageCommand on the page and future pages. The preference is stored locally in the reader's browser; no account or server storage is required.

Props

PropTypeDefaultDescription
commandstringRequiredPackage name or complete command to transform.
mode"auto" | "install" | "exec""auto"Controls how commands are generated.

Was this page helpful?