███╗ ██╗ █████╗ ██████╗██╗ ██╗██╗ ██╗██╗ ████╗ ██║██╔══██╗██╔════╝██║ ██║██║ ██║██║ ██╔██╗ ██║███████║██║ ███████║██║ ██║██║ ██║╚██╗██║██╔══██║██║ ██╔══██║██║ ██║██║ ██║ ╚████║██║ ██║╚██████╗██║ ██║╚██████╔╝██║ ╚═╝ ╚═══╝╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═════╝ ╚═╝

Command

Display shell commands with one-click copy. Perfect for installation snippets and quick-start guides.

pnpm dlx nachui list

default.tsx

1import { Command } from '@/components/ui/command';
2
3export function Default() {
4  return <Command command="pnpm dlx nachui list" />;
5}

Installation

pnpm dlx nachui add command

Anatomy

1import { Command } from '@/components/ui/command';

1<Command command="pnpm dlx nachui add button" />

Examples

Default

pnpm dlx nachui list

default.tsx

1import { Command } from '@/components/ui/command';
2
3export function Default() {
4  return <Command command="pnpm dlx nachui list" />;
5}

API Reference

CliCommand

Prop	Type	Default	Description
`command`	`string`	—	The CLI command string to display and copy to clipboard.
`prefix`	`string`	`"$"`	Symbol displayed before the command (e.g. `$`, `>`, `%`).
`resetDelay`	`number`	`2000`	Milliseconds before the copied state resets back to the copy icon.
`onCopied`	`() => void`	—	Callback fired after the command is successfully copied.
`className`	`string`	—	Additional CSS class names applied to the root element.

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousCheckbox

NextCollapsible