Brand logoentauri

Add this component

npx zentauri-ui add package-install-command

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Utilities

Package Install Command for displaying copyable install snippets

Use the package install command component to show a copyable install command with tabs for npm, pnpm, yarn, and bun. Pass a package name via the packageName prop; the component builds the command for each package manager. defaultManager sets the initial tab, enableClipboard toggles the copy button, and appearance/size control chrome and text scale. The separate animated entry adds a fade-in preset via framer-motion.

npm install @zentauri-ui/zentauri-components

Package install command playground

Pick a command, appearance, and size to preview the install command component live. Toggle tabs to switch between package managers, show or hide the copy button, and use Show output / Show code to copy the matching snippet.

npm install @zentauri-ui/zentauri-components

All appearances

Every shipped chrome appearance over the same command. Click any card to load it into the playground above.

npm install @zentauri-ui/zentauri-components
npm install @zentauri-ui/zentauri-components
npm install @zentauri-ui/zentauri-components
npm install @zentauri-ui/zentauri-components

Package Install Command API

Generated from the package prop types and variant definitions.

PackageInstallCommand

PackageInstallCommandProps

Variants

PropTypeDefault
appearance
contrastdefaultglasssubtle
default
size
lgmdsm
md

Behavior

PropTypeDefault
defaultManagerCurrently selected package manager.PackageManager | undefinednone
enableClipboardShow a copy button that copies the install command.boolean | undefinednone
labelsOverride default copy labels.PackageInstallCommandLabels | undefinednone
packageName*Package name(s) to install, e.g. "react" or "react react-dom".stringnone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLDivElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone

PackageInstallCommandVariant

PackageInstallCommandVariantProps

Behavior

PropTypeDefault
appearance'default' | 'subtle' | 'contrast' | 'glass' | null | undefinednone
size'md' | 'sm' | 'lg' | null | undefinednone

PackageInstallCommandAnimated

PackageInstallCommandAnimatedProps

animated

Behavior

PropTypeDefault
animationPackageInstallCommandAnimation | undefinednone
appearance'default' | 'subtle' | 'contrast' | 'glass' | null | undefinednone
defaultManagerCurrently selected package manager.PackageManager | undefinednone
enableClipboardShow a copy button that copies the install command.boolean | undefinednone
labelsOverride default copy labels.PackageInstallCommandLabels | undefinednone
packageName*Package name(s) to install, e.g. "react" or "react react-dom".stringnone
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).Ref<HTMLDivElement> | undefinednone
size'md' | 'sm' | 'lg' | null | undefinednone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLDivElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone
CSS variable overrides

Package Install Command CSS variables

Override these package-install-command variables on :root, a theme selector, or a component wrapper.

28 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-package-install-command-border: #0000001a;
  --zui-package-install-command-bg: oklch(98.4% 0.003 247.858);
  --zui-package-install-command-fg: oklch(20.8% 0.042 265.755);
  --zui-package-install-command-subtle-bg: oklch(92.9% 0.013 255.508);
  --zui-package-install-command-contrast-bg: #ffffff;
  --zui-package-install-command-glass-bg: #ffffffcc;
  --zui-package-install-command-glass-border: #ffffff66;
  --zui-package-install-command-tab-fg: oklch(44.6% 0.043 257.281);
  --zui-package-install-command-tab-hover-bg: #0000000d;
  --zui-package-install-command-tab-active-bg: #ffffff;
  --zui-package-install-command-tab-active-fg: #7c3aed;
  --zui-package-install-command-code-fg: #16a34a;
  --zui-package-install-command-action-fg: oklch(44.6% 0.043 257.281);
  --zui-package-install-command-action-hover-bg: #0000000d;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-package-install-command-border-dark: #ffffff1a;
  --zui-package-install-command-bg-dark: oklch(12.9% 0.042 264.695);
}

Composition and API

Pass a package name through the packageName prop (e.g. "react" or "@zentauri-ui/zentauri-components"). The component builds the install command for each package manager and renders tabs for npm, pnpm, yarn, and bun. defaultManager sets the initial active tab, enableClipboard toggles the copy button, and appearance/size control chrome and text scale. The separate animated entry adds a fade preset for the command block.

Accessibility

The copy control is a real button with accessible labeling. The package-manager tabs use proper aria roles and keyboard navigation. Each state change (copied, tab selected) is communicated to assistive technology. The animated entry's motion is short and easing-based, so pair it with prefers-reduced-motion handling in your app where needed.

Next.js integration notes

The static PackageInstallCommand entry ships no framer-motion and is safe in any Server or Client Component tree (it is a Client Component because the copy button manages local state). The animated PackageInstallCommandAnimated entry imports framer-motion, which is an optional peer dependency — install it only if you use the animated entry. Both render deterministically from the same command, so server and client output match and there is no hydration mismatch.

FAQ

How do I change the package manager that is selected by default?

Use the defaultManager prop to set the initial active tab. It accepts "npm", "pnpm", "yarn", or "bun".

Can I hide the package-manager tabs?

The tabs are always shown. There is no built-in prop to hide them. If you need a standalone copyable install command without tabs, compose the PackageInstallCommandTabs sub-component separately.

Do I need framer-motion?

Only for the animated entry. The default import from @zentauri-ui/zentauri-components/ui/package-install-command is framer-motion-free. Import PackageInstallCommandAnimated from the /animated subpath when you want the fade preset, and install framer-motion as a peer dependency.

How do I theme the command colors?

Override the --zui-package-install-command-* CSS variables (bg, fg, border, tab, copy-icon, and more) on :root, a theme selector, or a wrapper. Each variable ships a light fallback and a paired -dark variant for dark mode.