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

Secret Value Exploration

Use SecretValue for a retrievable secret that should stay masked until the user deliberately reveals it. These examples use the production component to show its masked, revealed, short-value, and overflow states.

Default

Masked by default. Copy keeps the full value off screen.

API Key hidden, ending in QY6e

Revealed

The full value remains selectable until hidden or unmounted.

vck_8n9kedHaNEJxqDW26Hrfr0laQy8Qs5JTWMY199wEKN6J6I6hxR37QY6e

Short Value

Short values remain fully masked instead of exposing a partial fingerprint.

API Key hidden

Constrained Width

Long values scroll with a soft fade while actions remain available.

example_secret_YWNjXzEyMzQ1Njc4OTBhYmNkZWZnaGlqa2xtbm9wcXJzdHV2d3h5ejAxMjM0NTY3ODkw

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.

Was this helpful?

supported.