Snippet

Component 22

About

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Snippet to your project and fits it to your theme.

Code

How Snippet is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Snippet,
  SnippetCopyButton,
  SnippetHeader,
  SnippetTabsContent,
  SnippetTabsList,
  SnippetTabsTrigger,
} from '@/components/ui/snippet';
import { HeartIcon, BoxIcon } from 'lucide-react';
import { useState } from 'react';

const commands = [
  {
    label: 'kibo-ui',
    icon: HeartIcon,
    code: `npx kibo-ui@latest add snippet`,
  },
  {
    label: 'shadcn',
    icon: BoxIcon,
    code: `npx shadcn@latest add https://www.kibo-ui.com/registry/snippet.json`,
  },
];

const Demo = () => {
  const [value, setValue] = useState(commands[0].label);
  const activeCommand = commands.find((command) => command.label === value);

  return (
    <Snippet value={value} onValueChange={setValue} className="w-full">
      <SnippetHeader>
        <SnippetTabsList>
          {commands.map((command) => (
            <SnippetTabsTrigger key={command.label} value={command.label}>
              <command.icon size={14} />
              <span>{command.label}</span>
            </SnippetTabsTrigger>
          ))}
        </SnippetTabsList>
        <SnippetCopyButton
          value={activeCommand?.code}
          onCopy={() =>
            console.log(`Copied "${activeCommand?.code}" to clipboard`)
          }
          onError={() =>
            console.error(`Failed to copy "${activeCommand?.code}" to clipboard`)
          }
        />
      </SnippetHeader>
      {commands.map((command) => (
        <SnippetTabsContent key={command.label} value={command.label}>
          {command.code}
        </SnippetTabsContent>
      ))}
    </Snippet>
  );
}
  
export default { Demo }