Primitive / Moleculebeta

Install Command

Package manager tabs, a $ prefixed command and a copy button inside a code panel.

Edit on GitHub

pnpm dlx @glinui/cli@latest add install-command

Install the CLI

Pick your package manager. The command is copied exactly as shown.

Terminal

$ npm install @acme/cli

Or add a single component with the registry command.

Registry

$ pnpm dlx @glinui/cli@latest add button

Installation

Install from

pnpm dlx @glinui/cli@latest add install-command

Prefer the package?

Usage

Variants

Surface variants of the underlying CodePanel.

glinr

$ npm install zod

plain

$ npm install zod

import { InstallCommand } from "@glinui/ui"


export function InstallVariants() {
  return (
    <div className="grid w-full gap-4 md:grid-cols-2">
      <InstallCommand packageName="zod" variant="glinr" title="glinr" />
      <InstallCommand packageName="zod" variant="plain" title="plain" />
    </div>
  )
}

Accessibility

Built on Tabs: arrow keys move between package managers.
The $ prefix is hidden from assistive technology and from selection.

Keyboard Interactions

Key	Action
`ArrowLeft / ArrowRight`	Move between tabs.
`Enter / Space`	Activate the copy button.

Reduced Motion

No motion beyond the copy button press.

API Reference

Prop	Type	Required	Default	Description
`variant`	`CodePanelProps["variant"]`	No	`ambient (glinr)`	Passed to the underlying CodePanel. Follows the ambient style when omitted.
`packageName`	`string`	No	`@glinui/ui`	Builds npm, pnpm, yarn and bun commands.
`commands`	`Record<string, string>`	No	`-`	Custom tab label to command map.
`value / defaultValue`	`string`	-	`-`	Controlled or uncontrolled active tab.
`onValueChange`	`(value: string) => void`	No	`-`	Tab change callback.
`onCopy`	`(command: string, tab: string) => void`	No	`-`	Called after copying.
`defaultValue`	`string`	No	`-`	Initial tab when uncontrolled. Defaults to the first tab.
`tabsLabel`	`string`	No	`"Package manager"`	Accessible name of the tab list.
`title`	`React.ReactNode`	No	`-`	Header title.
`value`	`string`	No	`-`	Controlled active tab.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { InstallCommand } from "@glinui/ui"

Source Files

install-command.tsx

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/install-command.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

InstallCommandProps

`InstallCommandProps`

Prop	Type	Required	Default	Description
`commands`	`Record<string, string>`	No	`-`	Custom tab label to full command map. Keys become the tabs, in insertion order.
`defaultValue`	`string`	No	`-`	Initial tab when uncontrolled. Defaults to the first tab.
`onCopy`	`(command: string, tab: string) => void`	No	`-`	Called after a successful copy with the copied command (without the `$`).
`onValueChange`	`(value: string) => void`	No	`-`	Called when the tab changes.
`packageName`	`string`	No	`"@glinui/ui"`	Package name(s); builds npm / pnpm / yarn / bun commands. Ignored when `commands` is set.
`tabsLabel`	`string`	No	`"Package manager"`	Accessible name of the tab list.
`title`	`React.ReactNode`	No	`-`	Header title.
`value`	`string`	No	`-`	Controlled active tab.
`variant`	`CodePanelProps["variant"]`	No	`-`	Surface variant of the underlying CodePanel. Omit for the ambient design style (glinr canonical, plain flat block, glass opt-in).