Command line
StableA one-line shell command with a $ prompt and a Copy command button.
A card row in mono type: a $ that is drawn but never copied, the command, cut off with an ellipsis when it runs long, and a button that puts exactly the command on the clipboard and says “Copied” for 1.6 seconds.
Updated View source
Commands
import { CommandLine } from '@rchursin/home/ui'
/** * The $ is drawn, not copied: each button puts only its command on the clipboard. With two on * one page, each button is named for its own command. */export default function CommandLineBasic() { return ( <div className="flex w-full max-w-md flex-col gap-3"> <CommandLine command="npm install" label="Copy install command" /> <CommandLine command="npm run dev" label="Copy dev command" /> </div> )}Usage
import { CommandLine } from '@rchursin/home/ui'<CommandLine command="npm run dev" />Examples
A long command
Cut off with an ellipsis on screen; the button still copies all of it.
import { CommandLine } from '@rchursin/home/ui'
/** A command longer than the row is cut off with an ellipsis; the copy button still copies all of it. */export default function CommandLineLong() { return <CommandLine command="npx prettier --no-semi --single-quote --print-width 180 --write src/site" className="w-full max-w-sm" />}API
Command line props
| Prop | Type | Default | Description |
|---|---|---|---|
commandrequired | string | – | The command, without the $. It is shown and copied as written. |
label | string | 'Copy command' | The copy button’s words and name. Give each its own when a page has several: “Copy install command”. |
className | string | – | Extra classes on the row, e.g. a width. |
Accessibility
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves to the copy button. |
| EnterSpace | Copies the command. |
- The $ is aria-hidden, so screen readers read only the command, from a <code> element.
- When the command is cut off on screen, the full text is still in the page for screen readers.
- The button’s label sits in an aria-live="polite" span, so “Copied” is announced after a press.
- The button is named by label, “Copy command” by default. With several on one page, give each its own label so they can be told apart in a list of buttons.
- If the browser blocks the clipboard (no permission, or a page not served over HTTPS), the command is selected on the page and the button says “Press ⌘C” (“Press Ctrl C” off Apple devices), which is announced with a short explanation.
Guidelines
Do
- Show a command people can run as it is.
- Keep it short enough to read in full on a phone, or split it into steps.
Don’t
- Don’t include the $ in command; the prompt is drawn for you.
- Don’t chain several commands with && just to fit one row.
In use
Related
- Copy buttonCopy text to the clipboard with one press: a pearl button that says “Copied”, a quiet one for code, and the helper under both.
- TerminalA dark terminal window with sample scan output: usage bars, a context cost and a verdict per item, printed line by line.
- Code blockHighlighted code in five grey roles, with line numbers, picked-out lines, a Wrap toggle, Copy, and long files folded.
Source
The component’s own files, exactly as they run on this site.
/** * Small building blocks shared by the four home pages. * All black-and-white; every state is told apart by shape or text, never by colour alone. */import { useEffect, useRef, useState, type ComponentPropsWithoutRef, type CSSProperties, type MouseEvent, type ReactNode,} from "react"import { cx } from "../components/cx"import { useIsApple } from "../product/lib/hotkeys"import { copyText } from "../product/ui/code"import type { Verdict } from "./content"
/** Stagger index for .lux-reveal children (each step is 70ms) */export const delay = (d: number) => ({ "--d": d }) as CSSProperties