Snippet

Snippet is a component that allows you to display and copy code in a tabbed interface.

Installation

npx love-ui@latest add snippet

Usage

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

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

Features

Copy code to clipboard
Customize the tab contents
Multiple tabs support
Customizable copy button, tab triggers and tab content
Customizable copy button timeout and callbacks
Accessible tabs using Radix's Tabs primitive

Examples

NPM packages

npx next-forge@latest init

"use client";

import {
  Snippet,
  SnippetCopyButton,
  SnippetHeader,
  SnippetTabsContent,
  SnippetTabsList,
  SnippetTabsTrigger,
} from "../../../../../packages/snippet";
import { useState } from "react";

const commands = [
  {
    label: "npm",
    code: "npx next-forge@latest init",
  },
  {
    label: "yarn",
    code: "yarn dlx next-forge@latest init",
  },
  {
    label: "pnpm",
    code: "pnpx next-forge@latest init",
  },
  {
    label: "bun",
    code: "bunx next-forge@latest init",
  },
];

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

  return (
    <Snippet onValueChange={setValue} value={value}>
      <SnippetHeader>
        <SnippetTabsList>
          {commands.map((command) => (
            <SnippetTabsTrigger key={command.label} value={command.label}>
              {command.label}
            </SnippetTabsTrigger>
          ))}
        </SnippetTabsList>
        {activeCommand && (
          <SnippetCopyButton
            onCopy={() =>
              console.log(`Copied "${activeCommand.code}" to clipboard`)
            }
            onError={() =>
              console.error(
                `Failed to copy "${activeCommand.code}" to clipboard`
              )
            }
            value={activeCommand.code}
          />
        )}
      </SnippetHeader>
      {commands.map((command) => (
        <SnippetTabsContent key={command.label} value={command.label}>
          {command.code}
        </SnippetTabsContent>
      ))}
    </Snippet>
  );
};

export default Example;

Sandbox Choicebox