PM Command

<script lang="ts">
  import { PMCommand } from "$lib/components/ui/pm-command/index.js";
</script>
 
<div class="flex w-full max-w-md flex-col gap-4">
  <PMCommand command="execute" args={["lily-svelte@latest", "add", "button"]} />
  <PMCommand variant="secondary" command="install" args={["bits-ui"]} />
</div>

Installation

npx lily-svelte@latest add pm-command

npx lily-svelte@latest init

npm install package-manager-detector

Usage

<script lang="ts">
	import { PMCommand } from '$lib/components/ui/pm-command';
</script>
 
<PMCommand command="execute" args={['lily-svelte@latest', 'add', 'button']} />

The command and args are passed to package-manager-detector, so the right runner is shown for each tab — pnpm dlx, npm install, yarn add, and so on.

Install command

Use command="install" to render a dependency-install command.

<PMCommand command="install" args={['bits-ui']} />

Variants

<PMCommand variant="secondary" command="install" args={['bits-ui']} />

Bound agent

The selected package manager is bindable, so you can keep several blocks in sync.

<script lang="ts">
	import { PMCommand } from '$lib/components/ui/pm-command';
	import type { Agent } from 'package-manager-detector';
 
	let agent = $state<Agent>('pnpm');
</script>
 
<PMCommand bind:agent command="execute" args={['lily-svelte@latest', 'init']} />
<PMCommand bind:agent command="install" args={['bits-ui']} />

Props

• command — the package-manager-detector command kind, e.g. execute or install.
• args — everything after the runner, e.g. ['lily-svelte@latest', 'add', 'button'].
• agent — the selected package manager (bindable, defaults to npm).
• agents — the package managers shown as tabs (defaults to ['npm', 'pnpm', 'yarn', 'bun']).
• variant — default or secondary.
• class — extra classes for the outer container.