Snippet

Installation

npx shadcn@latest add @blank/snippet

Usage

import {
  Snippet,
  SnippetCopyButton,
  SnippetHeader,
  SnippetTabsContent,
  SnippetTabsList,
  SnippetTabsTrigger,
} from "@/components/ui/snippet"

<Snippet defaultValue="pnpm">
  <SnippetHeader>
    <SnippetTabsList>
      <SnippetTabsTrigger value="pnpm">pnpm</SnippetTabsTrigger>
      <SnippetTabsTrigger value="npm">npm</SnippetTabsTrigger>
    </SnippetTabsList>
    <SnippetCopyButton />
  </SnippetHeader>
  <SnippetTabsContent value="pnpm">pnpm add motion</SnippetTabsContent>
  <SnippetTabsContent value="npm">npm install motion</SnippetTabsContent>
</Snippet>

SnippetCopyButton copies the command in the active tab, so one button serves every tab and the command is written once. Pass value to copy something else.

Snippet is for one-line commands. For multi-line source with highlighting, use Code Block.

Examples

One choice for every snippet

Snippet is a Radix Tabs root. Control value to keep every snippet on a page on the reader's package manager.

API Reference

Snippet takes the Tabs root props: value, defaultValue, onValueChange. SnippetTabsTrigger and SnippetTabsContent take value.

SnippetCopyButton

Everything else is a CopyButton prop, so the copy feedback matches every other copy control.