One line to type, on a baseline like a field already filled in. The address recedes, the part that's yours is italic, and copying draws the line in the accent.
shadcn@latestthe shadcn tooladdcopies an item inhttps://thedirectors.agency/ui/r/button.jsonwhere the item livesshadcn@latest: the shadcn tool. add: copies an item in. https://thedirectors.agency/ui/r/button.json: where the item lives
import{CommandLine}from"@/components/ui/command-line"constADD=`shadcn@latest add https://thedirectors.agency/ui/r/button.json`exportdefaultfunctionExample(){return(<divclassName="grid gap-y-16"><CommandLinerunnercommand={ADD}emphasis="button"/><divclassName="grid gap-y-4"><spanclassName="ot-label">parsed</span><CommandLinevariant="parsed"command={ADD}emphasis="button"glosses={["the shadcn tool","copies an item in","where the item lives"]}/></div><divclassName="grid gap-y-4"><spanclassName="ot-label">synopsis</span><CommandLinevariant="synopsis"runnercommand={ADD}emphasis="button"blank="Item name"/></div></div>)}
Contract
Underneath: native, plus a hook that shares the runner pick between every command line and remembers it (localStorage key 0db-runner).
Anatomy: <figure class="ot-command-line"> holding an optional .ot-command-line-runners radio group (npm, pnpm, yarn, bun), then .ot-command-line-row: <code class="ot-command-line-text"> and Copy.
One line to type, set on a baseline like a field already filled in. The runner and the address recede to pencil; the command is ink; emphasis, the part of an address that's the reader's, is the expression italic. A long line breaks after a slash or a dot and its turnover hangs; the emphasised name moves to a new line whole with what follows it, and breaks after a hyphen only when it's wider than the line.
The runner words are a radio group: the chosen one turns italic with the dot beneath it, and every command line on the page follows.
Copying draws the baseline in the accent, left to right, then lets it go; the label rolls from Copy to Copied.
parsed (data-variant="parsed", glosses): the interlinear gloss, a linguist's word-by-word reading, and the dictionary entry of "the uncreative", the part of speech set small under the word. Each glossed word (.ot-command-line-word) stands over a short rule the width of the word, its gloss (.ot-command-line-gloss) hung beneath in small pencil type; the words keep one baseline and each column is as wide as its word or its gloss. Pointing at a word inks its rule and its gloss. The glosses are hidden from screen readers and read once after the command instead, word by word.
synopsis (data-variant="synopsis", blank): a manual page's synopsis, where the words you replace are set in italic. The emphasis becomes a blank you write in (input.ot-command-line-blank, labelled by blank), in your italic on a hairline of its own; it grows with what you write (field-sizing: content, with size as the fallback), spaces are refused, an empty blank shows the original in pencil, and Copy copies your line. Focus draws the accent under your part only.
The command reads left to right on any page (dir="ltr" on the <code>); a long address breaks after a slash, never inside //.
Keyboard: arrows move between runners; the synopsis blank is a text field; Copy is a button.
Props
Props of Command line
Prop
Type
Default
What it does
command
string
The command. With runner, leave the runner off: "shadcn@latest add https://…/button.json".
runner
boolean
false
Run it through the package manager the reader picks: npx, pnpm dlx, yarn or bunx. Every command line on the page shares the pick, and the next visit remembers it.
emphasis
string
The part of an address that's the reader's, set in italic: an item's name.
variant
"line" | "parsed" | "synopsis"
"line"
line: one line on a baseline. parsed: each glossed word stands over a short rule with its gloss in small type beneath, the words on one baseline; pointing at a word inks both. synopsis: emphasis becomes a blank the reader writes in, in italic, growing with what they write; Copy copies their line.
glosses
string[]
parsed: one gloss per word of the command, in order. Leave one empty to skip a word. Read to screen readers after the command.
blank
string
"Your part"
synopsis: names the blank for assistive tech, such as Item name.
Craft
Where its move comes from
Where its move comes from
Component
Reference
Move
Command line
A printed form's filled-in line
One line on a baseline; your part in italic
Parsed command line
The interlinear gloss; "the uncreative" definition
Each word over a short rule, its gloss beneath
Synopsis command line
A manual page's synopsis
Your part is a blank you write in; Copy copies your line
How it moves
How it moves
Component
Articulation
What moves
Command line
Drawn
Copying draws the baseline in the accent, left to right, and lets it go
Parsed command line
Ink
Pointing at a word inks its rule and its gloss
Synopsis command line
Fill in
The blank grows with what you write; focus draws the accent under it