Components
Snippet
A copyable terminal command.
Default
$ npm install buena-mono
<div class="flex items-center gap-3 rounded-lg border border-separator bg-bg-surface px-4 py-3 font-mono text-sm">
<span>$ npm install buena-mono</span>
<button onClick={copy}>{copied ? <Check /> : <Copy />}</button>
</div>Variants
$ cd buena-mono
$ npm run build
https://mrkdwn.buenalabs.io/v/1.2
$ npm install buena-mono
$ buena publish
Build passed in 1.2s
Deprecated flag --legacy
Error: missing glyph U+2192
{/* multi-line */}
<Snippet text={["cd buena-mono", "npm run build"]} />
{/* copy verbatim, no prompt */}
<Snippet text="https://…" prompt={false} />
{/* inverted surface */}
<Snippet text="npm install buena-mono" inverted />
{/* copy callback */}
<Snippet text="buena publish" onCopy={(v) => toast(v)} />
{/* status tones */}
<Snippet text="Build passed" tone="success" prompt={false} />
Top to bottom: a multi-line snippet (array
of commands); no prompt
(prompt={false}) so URLs and output copy verbatim;
an inverted dark surface; a
callback firing
onCopy; and success / warning / error
variants.
Controlled copied state
buena publish --prod
const [copied, setCopied] = useState(false);
<button onClick={() => { copy(text); setCopied(true); setTimeout(() => setCopied(false), 1000); }}>
Copy from card
</button>
{/* checkmark is driven externally, not by the snippet's own button */}
<Snippet text="buena publish --prod" copied={copied} prompt={false} />
The copied prop drives the checkmark
externally — copying from the card above
flips the snippet's feedback, so a context trigger can reuse the same animation.
Markdown for agents: /design/snippet.md · spec: /design.md