Snippet

A copyable shell command. Authors never type the leading $. The component draws the prompt.

Default

npm init next-app


        
          1
          
          <Snippet text="npm init next-app" width="300px" />

Inverted

dark inverts the chrome for a terminal-on-black block.

npm init next-app


        
          1
          
          <Snippet dark text="npm init next-app" width="300px" />

Multi-line

Pass a string array. Keep it short. Longer scripts belong in Code Block.

cd project

now


        
          1
          
          <Snippet :text="['cd project', 'now']" width="100%" />

No prompt

Turn the $ off for URLs, JSON, or output that must copy exactly as shown.

npm init next-app


        
          1
          
          <Snippet :prompt="false" text="npm init next-app" width="300px" />

Callback

copy fires after the clipboard write. Use it for toasts or a parent checkmark.

npm init next-app

Last copy: —


        
          1
          
          <Snippet
        

          2
          
            text="npm init next-app"
        

          3
          
            width="300px"
        

          4
          
            @copy="onCopy"
        

          5
          
          />

Variants

npm init next-app


        
          1
          
          <Snippet type="success" text="npm init next-app" width="300px" />
        

          2
          
          <Snippet type="error" text="npm init next-app" width="300px" />
        

          3
          
          <Snippet type="warning" text="npm init next-app" width="300px" />

Placeholder

Empty text plus placeholder. The placeholder is informational and is not copied.

Run vercel link to fetch env vars


        
          1
          
          <Snippet
        

          2
          
            text=""
        

          3
          
            placeholder="Run vercel link to fetch env vars"
        

          4
          
            width="300px"
        

          5
          
          />

Copy text

copy-text overrides the clipboard payload when the visible line is a short label.

Copy install prompt


        
          1
          
          <Snippet
        

          2
          
            :prompt="false"
        

          3
          
            text="Copy install prompt"
        

          4
          
            copy-text="npm create next-app@latest"
        

          5
          
            width="300px"
        

          6
          
          />

Controlled copied

Drive the checkmark from a parent when another surface copies a different payload.

Copy install prompt


        
          1
          
          <Snippet
        

          2
          
            :copied="copied"
        

          3
          
            :prompt="false"
        

          4
          
            text="Copy install prompt"
        

          5
          
            width="300px"
        

          6
          
            @copy="onControlledCopy"
        

          7
          
          />

Best practices

Snippet is a runnable command the user is meant to copy. Inline tokens use Inline Code. Multi-line source uses Code Block.
Pass the command as text. Do not prefix $ yourself or the row renders $ $ vercel deploy.
Set prompt to false for non-shell strings so the visible text matches the clipboard.
One command per snippet. An array is a short sequence. Longer scripts move to Code Block so people can read before they copy.
Placeholder is sentence case, no trailing period, no “Please”. It is not copied. The copy button disables when text is empty and copy-text is unset.
Use copy-text only when the visible line is not the payload. For a plain string, it is redundant.