Snippet Install

About this component

An install command block with a tab for each package manager: npm, pnpm, yarn and bun, or any subset in any order. The command is derived from the packages, a dev flag and whether they are installed or run once (npx, pnpm dlx, yarn dlx, bunx), or given exactly per manager. A marker slides between the tabs on a spring, and the reader's pick is remembered and shared by every snippet on the page and across visits. The copy button morphs into a check and announces itself, and a long command scrolls sideways instead of wrapping.

Usage

The import and the props worth knowing about, in one place.

import { SnippetInstall } from "@/components/beste/component/snippet-install";

// Installs, with the command written for each manager
<SnippetInstall packages={["motion", "lucide-react"]} />

// A dev dependency
<SnippetInstall packages="@biomejs/biome" dev />

// Run once without installing: npx, pnpm dlx, yarn dlx, bunx
<SnippetInstall kind="exec" packages="shadcn@latest add button" />

// Exact commands where the derived ones do not fit
<SnippetInstall
  managers={["pnpm", "bun"]}
  commands={{ pnpm: "pnpm create next-app@latest", bun: "bun create next-app" }}
/>

<SnippetInstall
  packages="zod"
  defaultManager="pnpm"   // shown until the reader picks
  remember={false}        // keep this snippet's pick to itself
  prompt={false}          // no $ before the command
  tone="outline"          // "muted" (default) | "outline" | "ghost"
  size="sm"               // "sm" | "default" | "lg"
  onCopy={(command) => console.log("Copied", command)}
/>

Keyboard and gestures

Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.

Left / Right	Moves between package managers while a tab is focused.
Home / End	Jumps to the first or last package manager.

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`packages`	`string \| string[]`	—	Packages to install or run, e.g. `"motion"` or `["react-hook-form", "zod"]`. For `exec`, the whole invocation: `"shadcn@latest add button"`.
`dev`	`boolean`	—	Install as a dev dependency. Ignored for `exec`.
`kind`	`"add" \| "exec"`	—	`add` installs, `exec` runs with npx, pnpm dlx, yarn dlx or bunx.
`commands`	`Partial<Record<PackageManager, string>>`	—	Exact command per manager. Wins over the derived one for any manager it names.
`managers`	`PackageManager[]`	—	Tabs to show, in order.
`defaultManager`	`"npm" \| "pnpm" \| "yarn" \| "bun"`	—	Tab shown before the reader has picked one.
`remember`	`boolean`	—	Remember the pick, shared by every snippet on the page and across visits.
`storageKey`	`string`	—	Storage key for the remembered pick. Snippets sharing a key stay in step.
`prompt`	`boolean`	—	Show a `$` prompt before the command.
`onCopy`	`(command: string, manager: PackageManager) => void`	—	Called after the command lands on the clipboard.
`tone`	`"muted" \| "outline" \| "ghost"`	—
`size`	`"sm" \| "default" \| "lg"`	—
`className`	`string`	—
`aria-label`	`string`	—	Accessible name for the tab list.