Snippet
Code in a sentence, or a command with a copy button.
Examples
One command, several commands, or a line without a prompt.
Inline code
Snippet.Inline puts code, URLs, and values inside a sentence. Long values wrap.
Install posthog-js, then set api_host in your SDK configuration.
Connect your agent to https://mcp.posthog.com/mcp to query product data from your editor.
Colors
Use gray (the default) in most cases, and one other color per section at most. The colors have no status meaning. Gray lets the surface show through, and the other colors are opaque.
Every inline color
Every color, as inline code.
whitegraybrandbluecobaltcoralcorn-bluegreenlemonlimepurpletangerinetealvioletyellowCopy on click
By default, a click selects the whole snippet. With copyOnClick, a click also copies it. Use it for values that people copy often, such as tokens and install commands.
Your project token is phc_k8Fz2nQw7xR4tY1u.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Use Snippet for a command to copy, and
Snippet.Inlinefor code in a sentence. For multi-line code, use CodeBlock.
API
Snippet is a site component. The block takes div element props and supplies the copy button. Snippet.Inline takes code element props.
Snippet
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | readonly string[] | – | The code or command lines. Required. |
| prompt | boolean | true | Show a dollar prompt before each line. |
| color | 'gray' | 'white' | 'blue' | 'cobalt' | 'coral' | 'corn-blue' | 'green' | 'lemon' | 'lime' | 'purple' | 'tangerine' | 'teal' | 'violet' | 'yellow' | 'gray' | Sets the fill, border, and text color. |
| copyOnClick | boolean | false | Copies the snippet when the user clicks it. Without it, a click selects the whole snippet. |
| onCopy | () => void | – | Runs after the copy button writes to the clipboard. |
Snippet.Inline
| Prop | Type | Default | Description |
|---|---|---|---|
| color | 'gray' | 'white' | 'blue' | 'cobalt' | 'coral' | 'corn-blue' | 'green' | 'lemon' | 'lime' | 'purple' | 'tangerine' | 'teal' | 'violet' | 'yellow' | 'gray' | Sets the fill, border, and text color. |
| copyOnClick | boolean | false | Copies the snippet when the user clicks it. Without it, a click selects the whole snippet. |
| onCopy | () => void | – | Runs after a click copies the text. Needs copyOnClick. |
| children | ReactNode | – | The code text. |