Code Snippet
A component for displaying code snippets with syntax highlighting and copy functionality.
npm install package
import { Snippet, SnippetCopyButton, SnippetHeader, SnippetTabsContent, SnippetTabsList, SnippetTabsTrigger, SnippetTabsContents,} from "@/registry/optics/code-snippet";<Snippet value={value} onValueChange={setValue}> <SnippetHeader> <SnippetTabsList variant="outline"> {commands.map((cmd) => ( <SnippetTabsTrigger key={cmd.label} value={cmd.label}> {cmd.label} </SnippetTabsTrigger> ))} </SnippetTabsList> </SnippetHeader> <SnippetTabsContents> {commands.map((cmd) => ( <SnippetTabsContent key={cmd.label} value={cmd.label}> {cmd.code} <SnippetCopyButton value={cmd.code} /> </SnippetTabsContent> ))} </SnippetTabsContents></Snippet>import { Snippet, SnippetCopyButton, SnippetHeader, SnippetTabsContent, SnippetTabsList, SnippetTabsTrigger, SnippetTabsContents,} from "@/registry/optics/code-snippet";<Snippet value={value} onValueChange={setValue}> <SnippetHeader> <SnippetTabsList variant="outline"> {commands.map((cmd) => ( <SnippetTabsTrigger key={cmd.label} value={cmd.label}> {cmd.label} </SnippetTabsTrigger> ))} </SnippetTabsList> </SnippetHeader> <SnippetTabsContents> {commands.map((cmd) => ( <SnippetTabsContent key={cmd.label} value={cmd.label}> {cmd.code} <SnippetCopyButton value={cmd.code} /> </SnippetTabsContent> ))} </SnippetTabsContents></Snippet>Installation
pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/code-snippet.json
Props
<SnippetCopyButton />
Name
Type
value
string
timeout
number