Geist Design System

Snippet

Display a snippet of copyable code for the command line.

Default

 
npm init next-app

Inverted

 
npm init next-app

Multi line

 
cd project
now

No prompt

 
npm init next-app

Callback

 
npm init next-app

Variants

 
npm init next-app
npm init next-app
npm init next-app

Controlled Copied State

Use the copied prop to control the copy button animation externally. This lets you copy different text (e.g. from a context card) while reusing the snippet's checkmark feedback.

Copy install prompt

Best Practices
  • Use Snippet for a runnable shell command the user is meant to copy. For inline tokens (env var names, paths) use InlineCode, and for multi-line source use CodeBlock.
  • Pass the command as text. Authors never type a leading $; the component renders the prompt, so text="$ vercel deploy" displays as $ $ vercel deploy.
  • Set prompt={false} for non-shell content (URLs, JSON, output you want copied verbatim) so the rendered string matches what gets copied.
  • Pair placeholder with text="" for an empty state. Sentence case, no trailing period, no Please: Run vercel link to fetch env vars. The placeholder is informational, not copied.
  • Use copyText only when text contains rich nodes (<span> highlights, conditional fragments) and the clipboard payload should be plain text. For a string text, copyText is redundant.
  • Keep one command per Snippet. Pass an array to text for a short multi-line block; for longer scripts, switch to CodeBlock so users can read before they copy.
  • Use copied plus an onCopy callback when a parent surface (a card, a tooltip) needs to show the same checkmark feedback while copying different text.