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.

yarn add @tenstorrent/vesper

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:

yarn add @tenstorrent/vesper

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:

curl https://api.example.com/data

curl https://api.example.com/data

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:

nvm use 24node -v >> .nvmrc

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:

nvm use 24node -v >> .nvmrc

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

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

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