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>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 |