Command Copy · PaneUI

$ npx shadcn@latest add @paneui/button

$ npx @taimatsu/paneui@latest init

Installation

$ pnpm dlx shadcn@latest add @paneui/command-copy

Usage

import { CommandCopy } from "@/components/ui/command-copy"

<CommandCopy command="npx @taimatsu/paneui@latest init" />

Examples

Tabs

Tabs and command in one frame, for a command that changes with a setting.

Sizes

Use lg for the one install line on a landing page.

Floating

Use on pictures and tinted sections.

Without prompt

Copy feedback

The copy glyph cross-fades to a check for 1.6s and a polite live region says “Copied”. Under reduced motion the swap is an opacity fade only. If the clipboard is blocked nothing changes and onCopy is not called.

Labels

The button reads “Copy command” and “Copied” from the nearest LocaleProvider (copyCommand, copied); label overrides the first. The prompt glyph is hidden from assistive tech and never copied.

Long commands

The command stays on one line and scrolls sideways without a scrollbar, so the button never moves.

Groups

CommandGroup puts the tabs on the frame's top line and the command under it, so a package-manager switch and the command it runs read as one control instead of a segmented track above a separate bar. storageKey remembers the choice and keeps every group with that key in step.

API Reference

CommandCopy

Also accepts every prop of div.

command*: string; The command, exactly as it is copied.
prompt= "$": ReactNode; Glyph before the command; null hides it.
label: string; Accessible name of the copy button.
onCopy: (command: string) => void; Called after the command reaches the clipboard.
variant= "default": "default" | "floating" | "plain"; default is a raised card; floating is a translucent, blurred bar with a deeper shadow; plain drops the frame for use inside CommandGroup.
size= "default": "default" | "lg"; default is 40px with a ghost button; lg is a 56px round bar with a solid round 40px button and larger type from the sm breakpoint.

Prop	Type	Default	Description
command*	string	—	The command, exactly as it is copied.
prompt	ReactNode	"$"	Glyph before the command; `null` hides it.
label	string	—	Accessible name of the copy button.
onCopy	(command: string) => void	—	Called after the command reaches the clipboard.
variant	"default" \| "floating" \| "plain"	"default"	`default` is a raised card; `floating` is a translucent, blurred bar with a deeper shadow; `plain` drops the frame for use inside `CommandGroup`.
size	"default" \| "lg"	"default"	`default` is 40px with a ghost button; `lg` is a 56px round bar with a solid round 40px button and larger type from the `sm` breakpoint.

data-variant: The variant.
data-size: The size.

Data attribute	Description
data-variant	The variant.
data-size	The size.

CommandGroup

Tabs on the frame's top line with one command under them. Also accepts every prop of div.

items*: readonly CommandGroupItem[]; { value, command, label? }, one entry per tab.
value: string; Controlled tab. Falls back to the first item.
defaultValue: string; Tab shown before the reader picks one.
onValueChange: (value: string) => void; Called when the tab changes.
storageKey: string; Remember the tab in localStorage and keep groups with the same key in sync.
prompt= "$": ReactNode; Glyph before each command; null hides it.

Prop	Type	Default	Description
items*	readonly CommandGroupItem[]	—	`{ value, command, label? }`, one entry per tab.
value	string	—	Controlled tab. Falls back to the first item.
defaultValue	string	—	Tab shown before the reader picks one.
onValueChange	(value: string) => void	—	Called when the tab changes.
storageKey	string	—	Remember the tab in localStorage and keep groups with the same key in sync.
prompt	ReactNode	"$"	Glyph before each command; `null` hides it.