# Snippet

A compact code display component with a built-in copy-to-clipboard button. Ideal for displaying short commands, installation instructions, or single-line code snippets.

```tsx demo
import { Snippet } from "@tenstorrent/vesper/snippet";

export default function SnippetDemo() {
  return <Snippet>yarn add @tenstorrent/vesper</Snippet>;
}
```

## Options

| Prop       | Type                      | Description                                                                                                       | Default     |
| ---------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------- |
| `children` | `string`                  | The code snippet text to display. Also used as the value copied to the clipboard when the copy button is clicked. | —           |
| `variant`  | `"default" \| "contrast"` | The visual style variant of the snippet.                                                                          | `"default"` |

Any additional props are forwarded to the underlying `<div>` element.

## Examples

### Basic usage

Render a `Snippet` by wrapping string children with it:

```tsx demo
import { Snippet } from "@tenstorrent/vesper/snippet";

export default function BasicSnippet() {
  return <Snippet>yarn add @tenstorrent/vesper</Snippet>;
}
```

### Variants

A `Snippet` can be rendered in one of two variants: `"default"` or `"contrast"`. Use the `"contrast"` variant to render a `Snippet` with increased contrast:

```tsx demo
import { Snippet } from "@tenstorrent/vesper/snippet";

export default function SnippetVariants() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "var(--vesper-spacing-4)",
      }}
    >
      <Snippet variant="default">curl https://api.example.com/data</Snippet>
      <Snippet variant="contrast">curl https://api.example.com/data</Snippet>
    </div>
  );
}
```

### Multiline snippets

`Snippet` preserves newlines in the content it renders, so you can also pass string with line breaks to render multiline snippets.

You can use escaped newline characters with `\n`:

```tsx demo
import { Snippet } from "@tenstorrent/vesper/snippet";

export default function MultilineSnippet() {
  return <Snippet>{"nvm use 24\nnode -v >> .nvmrc"}</Snippet>;
}
```

You can also use template literals:

```tsx demo
import { Snippet } from "@tenstorrent/vesper/snippet";

const INSTALL_COMMAND = `nvm use 24
node -v >> .nvmrc`;

export default function TemplateLiteralSnippet() {
  return <Snippet>{INSTALL_COMMAND}</Snippet>;
}
```