Command Palette

Search for a command to run...

Code Snippet

A component for displaying code snippets with syntax highlighting and copy functionality.

Code Snippet
npm install package

import { Snippet, SnippetCopyButton, SnippetHeader, SnippetTabsContent, SnippetTabsContents, SnippetTabsList, SnippetTabsTrigger } from "@/components/optics/code-snippet";const commandsExample = [	{		label: "npm",		code: "npm install package",	},	{		label: "yarn",		code: "yarn add package",	},];<Snippet  className="w-full"  defaultValue="npm">  <SnippetHeader>    <SnippetTabsList variant="outline">      <SnippetTabsTrigger value="npm">        npm      </SnippetTabsTrigger>      <SnippetTabsTrigger value="yarn">        yarn      </SnippetTabsTrigger>    </SnippetTabsList>  </SnippetHeader>  <SnippetTabsContents>    <SnippetTabsContent      className="flex items-center justify-between gap-4"      value="npm"    >      npm install package      <SnippetCopyButton value="npm install package" />    </SnippetTabsContent>    <SnippetTabsContent      className="flex items-center justify-between gap-4"      value="yarn"    >      yarn add package      <SnippetCopyButton value="yarn add package" />    </SnippetTabsContent>  </SnippetTabsContents></Snippet>

Installation

pnpm dlx shadcn@latest add @optics/code-snippet

Props

<SnippetCopyButton />
Name
Type
value
string
timeout
number