CommandBox

A copyable shell command.

Preview

npx docs-sitekit add stat-row

src/examples/command-box/example.astro

---
import { CommandBox } from "@/presentation/components/site/command-box";
---

<CommandBox command="npx docs-sitekit add stat-row" client:load />

Add to your site

npx docs-sitekit add command-box

It writes these files, and keeps a file you changed:

src/presentation/components/site/command-box.tsx

It requires these entries of the registry, which add restores first:

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of CommandBox
Key	Type	Default	Allowed values	Description
`command`	string	required	-	The command, shown and copied as it is.
`label`	string	-	-	The accessible name of the copy button. Without it the name is "Copy command: " and the command.
`className`	string	-	-	Classes added to the box.

Variants and states

With a label of its own

The accessible name of the copy button, when the default one does not fit.

npm install

src/examples/command-box/label.astro

---
import { CommandBox } from "@/presentation/components/site/command-box";
---

<CommandBox command="npm install" label="Copy the install command" client:load />

About

A command in a box, with a button that copies it. The text is in the HTML, and the button copies once the page’s script has hydrated it. A long command scrolls inside the box without a scroll bar, and the page does not widen.

Accessibility

The button is a real button named “Copy command: ” and the command, or by label when you pass one.
After a copy the icon changes and a polite status region inside the button says “Copied” for a moment.
The button is 32 px square: above the 24 px minimum of WCAG 2.2, and under the 44 px that the kit asks for on a phone.
Without JavaScript the button is in the page and does nothing. The command stays selectable, and the box is not a form control.
The $ is decorative and aria-hidden.

Source

command-box.tsx

Edit this page

Last updated 5 November 2026