Command
- Stable
- WCAG 2.2 evidence
- RTL
A one-line shell command with a copy button: the $ prompt, the command in Code/Mono and a copy button
that turns into "Copied" for a moment. This is the code-snippet row of the data display set, not the command palette (use
CommandPalette for a searchable overlay of actions). The shell is presentational and renders in React Server Components; only the copy button (CommandCopyButton) is a client
island. The button is a native-feel React Aria Button: Enter and Space copy, keyboard focus shows the ring, and it is named by
copyLabel and described by the command (WCAG 2.1.1, 2.4.7, 4.1.2). The result is announced through React Aria's live region
(4.1.3), and the Copied state is the word and a check, not colour alone (1.4.1). The command stays selectable text and wraps
at any width (1.4.10). The snippet is always left to right (dir="ltr", as code is) so the prompt, the command and the button keep their order in
right-to-left pages; the labels you translate still read in their own direction. Consumer duties: never put secrets in a command that is shown on a page, and translate the three labels.
import { Command } from "@nexera-ui/react";- 5
- examples
- 7
- props
- 0
- live controls
- 1
- platform
- 10
- WCAG criteria
- 0
- blocks use it
Try every prop. Copy the code.
Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.
import { Command } from "@nexera-ui/react";
<Command />Examples 4
The same examples as Storybook, rendered live. Open Code to copy one.
No prompt
prompt={false} hides the $; any other string replaces it. The prompt is never copied.
import { Command } from "@nexera-ui/react";
<Command command="pnpm add @acme/hrms-sdk" />;
Long command
A long command wraps and breaks inside long words instead of scrolling, so nothing is cut off at any width.
import { Command } from "@nexera-ui/react";
<Command command="npm install @acme/hrms-sdk @acme/hrms-react @acme/hrms-tokens --registry https://registry.example.com/acme/private/packages" />;
Right to left
Right-to-left (Arabic): the snippet stays left to right, as code does; only the translated button label is Arabic.
import { Command } from "@nexera-ui/react";
<Command
command="npm install @acme/hrms-sdk"
copyLabel="نسخ الأمر"
copiedLabel="تم النسخ"
copyFailedLabel="تعذر النسخ"
/>;
Narrow container
In a narrow container the command wraps under the prompt and the button stays at the end.
import { Command } from "@nexera-ui/react";
<div className="max-w-64 border border-dashed border-default">
<Command command="npm install @acme/hrms-sdk" />
</div>;
Props 7
7 props shown
command*NexerastringThe command to show and copy. One line of shell: for several lines use a code block. It wraps when the container is narrow.
promptNexerastring | falseThe prompt before the command. Decorative: hidden from assistive technology and not copied. false hides it.
copyLabelNexerastringAccessible name of the copy button while it is idle. The command is its description. Translate it for your locale.
copiedLabelNexerastringText of the Copied state: shown beside the check, and announced politely when the command is copied. Translate it for your locale.
copyFailedLabelNexerastringAnnounced politely when the browser refuses the copy (no clipboard access). Translate it for your locale.
copiedDurationNexeranumberHow long the Copied state stays, in milliseconds.
onCopiedNexera(command: string) => voidCalled with the command after it was copied to the clipboard. (Not onCopy: that name is the native clipboard event of
the root element.)
* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.
Accessible by default.
Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.
WCAG 2.2 evidence
5 direct · 5 supporting- 1.1.1Non-text ContentLevel A · tested directly
- 1.3.1Info and RelationshipsLevel A · tested directly
- 1.3.2Meaningful SequenceLevel A · supporting test
- 1.4.10ReflowLevel AA · supporting test
- 1.4.12Text SpacingLevel AA · supporting test
- 2.1.1KeyboardLevel A · tested directly
- 2.4.7Focus VisibleLevel AA · supporting test
- 2.5.8Target Size (Minimum)Level AA · supporting test
- 4.1.2Name, Role, ValueLevel A · tested directly
- 4.1.3Status MessagesLevel AA · tested directly
Fits any width.
Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.
Styling hooks
Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.
data-hovereddata-pressed
<Command className="data-hovered:opacity-90 shadow-sm" />Used in blocks
No block uses Command yet.
Related components
- AccordionItemOne collapsible section of an FAQ or settings page.
- AreaChartA stacked area chart: layers piled up over time with the title, range switch, actions and legend of the card.
- AvailabilityRowOne person's availability across a window of the day: an avatar with initials and the name, and a timeline with the busy periods drawn as bars.
- AvatarA person or organisation shown as a photo, initials or an icon.
- AvatarGroupA row of overlapping avatars with a "+N" chip for the rest.
- AvatarLabelAn avatar with a name and an optional subtitle beside it, for a person in a list, a header or a mention.
- BadgeShort status or category label: `Tone` x `Variant` x `Size`, with an optional dot, leading icon and remove button.
- BadgeGroupA pill that pairs a small badge with a short message, for an announcement or a status line.