Command Copy · paneui

$ npx shadcn@latest add @paneui/button

$ npx paneui@latest init

Installation

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

Usage

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

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

Examples

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.

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"; default is a raised card; floating is a translucent, blurred bar with a deeper shadow.
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"	"default"	`default` is a raised card; `floating` is a translucent, blurred bar with a deeper shadow.
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.