All components
Install Command
Data DisplayA terminal block with package-manager tabs and a copy button.
$
pnpm dlx shadcn@latest add @canvas-ui/particle-scroll-reactInstallation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/install-command.jsonOr install manually
1. Install dependencies
pnpm add lucide-react clsx tailwind-merge2. Copy the component source into
components/library/install-command.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| target | string | - | Registry URL or name for `shadcn add`, or the package to install. |
| mode | "shadcn" | "dependency" | "shadcn" | Whether to build a shadcn add or a plain install command. |
| className | string | - | Classes applied to the wrapper. |
Accessibility
- Manager tabs are real buttons with aria-pressed marking the active one.
- The copy button carries an aria-label naming what it copies.
- The command is real text in a <code>, so it can be selected manually.
- Long commands scroll horizontally rather than wrapping mid-flag.
Dependencies
lucide-reactclsxtailwind-mergecopy-button