Snippet

Tabbed code display with one-click clipboard functionality and customizable content. Perfect for React documentation requiring code examples with Next.js integration and TypeScript support.

Radix UI Tabs

Lucide

Loading component...

'use client';import { CheckIcon, CopyIcon } from 'lucide-react';import {  type ComponentProps,  cloneElement,  type HTMLAttributes,  type ReactElement,  useState,} from 'react';import { Button } from '@/components/ui/button';import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';import { cn } from '@/lib/utils';export type SnippetProps = ComponentProps<typeof Tabs>;export const Snippet = ({ className, ...props }: SnippetProps) => (  <Tabs    className={cn(      'group w-full gap-0 overflow-hidden rounded-md border',      className    )}    {...props}  />);export type SnippetHeaderProps = HTMLAttributes<HTMLDivElement>;export const SnippetHeader = ({ className, ...props }: SnippetHeaderProps) => (  <div    className={cn(      'flex flex-row items-center justify-between border-b bg-secondary p-1',      className    )}    {...props}  />);export type SnippetCopyButtonProps = ComponentProps<typeof Button> & {  value: string;  onCopy?: () => void;  onError?: (error: Error) => void;  timeout?: number;};export const SnippetCopyButton = ({  asChild,  value,  onCopy,  onError,  timeout = 2000,  children,  ...props}: SnippetCopyButtonProps) => {  const [isCopied, setIsCopied] = useState(false);  const copyToClipboard = () => {    if (      typeof window === 'undefined' ||      !navigator.clipboard.writeText ||      !value    ) {      return;    }    navigator.clipboard.writeText(value).then(() => {      setIsCopied(true);      onCopy?.();      setTimeout(() => setIsCopied(false), timeout);    }, onError);  };  if (asChild) {    return cloneElement(children as ReactElement, {      // @ts-expect-error - we know this is a button      onClick: copyToClipboard,    });  }  const icon = isCopied ? <CheckIcon size={14} /> : <CopyIcon size={14} />;  return (    <Button      className="opacity-0 transition-opacity group-hover:opacity-100"      onClick={copyToClipboard}      size="icon"      variant="ghost"      {...props}    >      {children ?? icon}    </Button>  );};export type SnippetTabsListProps = ComponentProps<typeof TabsList>;export const SnippetTabsList = TabsList;export type SnippetTabsTriggerProps = ComponentProps<typeof TabsTrigger>;export const SnippetTabsTrigger = ({  className,  ...props}: SnippetTabsTriggerProps) => (  <TabsTrigger className={cn('gap-1.5', className)} {...props} />);export type SnippetTabsContentProps = ComponentProps<typeof TabsContent>;export const SnippetTabsContent = ({  className,  children,  ...props}: SnippetTabsContentProps) => (  <TabsContent    asChild    className={cn('mt-0 bg-background p-4 text-sm', className)}    {...props}  >    <pre className="truncate">{children}</pre>  </TabsContent>);

Installation

npx shadcn@latest add https://www.shadcn.io/registry/snippet.json

npx shadcn@latest add https://www.shadcn.io/registry/snippet.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/snippet.json

bunx shadcn@latest add https://www.shadcn.io/registry/snippet.json

Features

One-click clipboard functionality using native browser APIs with visual feedback and success indicators
Customizable tab system supporting unlimited tabs with flexible content and styling options
Multiple content support handling code snippets, command examples, and installation instructions
Accessible interface built on Radix UI Tabs primitive with full keyboard navigation and screen reader support
Flexible copy button with configurable timeout, custom callbacks, and success/error states
Custom tab triggers allowing personalized labels, icons, and interactive elements
Content customization supporting rich text, syntax highlighting, and formatted code blocks
TypeScript support with complete interface definitions for reliable integration
Responsive design adapting to mobile and desktop viewports with touch-friendly interactions

Examples

NPM packages

Loading component...

'use client';import { CheckIcon, CopyIcon } from 'lucide-react';import {  type ComponentProps,  cloneElement,  type HTMLAttributes,  type ReactElement,  useState,} from 'react';import { Button } from '@/components/ui/button';import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';import { cn } from '@/lib/utils';export type SnippetProps = ComponentProps<typeof Tabs>;export const Snippet = ({ className, ...props }: SnippetProps) => (  <Tabs    className={cn(      'group w-full gap-0 overflow-hidden rounded-md border',      className    )}    {...props}  />);export type SnippetHeaderProps = HTMLAttributes<HTMLDivElement>;export const SnippetHeader = ({ className, ...props }: SnippetHeaderProps) => (  <div    className={cn(      'flex flex-row items-center justify-between border-b bg-secondary p-1',      className    )}    {...props}  />);export type SnippetCopyButtonProps = ComponentProps<typeof Button> & {  value: string;  onCopy?: () => void;  onError?: (error: Error) => void;  timeout?: number;};export const SnippetCopyButton = ({  asChild,  value,  onCopy,  onError,  timeout = 2000,  children,  ...props}: SnippetCopyButtonProps) => {  const [isCopied, setIsCopied] = useState(false);  const copyToClipboard = () => {    if (      typeof window === 'undefined' ||      !navigator.clipboard.writeText ||      !value    ) {      return;    }    navigator.clipboard.writeText(value).then(() => {      setIsCopied(true);      onCopy?.();      setTimeout(() => setIsCopied(false), timeout);    }, onError);  };  if (asChild) {    return cloneElement(children as ReactElement, {      // @ts-expect-error - we know this is a button      onClick: copyToClipboard,    });  }  const icon = isCopied ? <CheckIcon size={14} /> : <CopyIcon size={14} />;  return (    <Button      className="opacity-0 transition-opacity group-hover:opacity-100"      onClick={copyToClipboard}      size="icon"      variant="ghost"      {...props}    >      {children ?? icon}    </Button>  );};export type SnippetTabsListProps = ComponentProps<typeof TabsList>;export const SnippetTabsList = TabsList;export type SnippetTabsTriggerProps = ComponentProps<typeof TabsTrigger>;export const SnippetTabsTrigger = ({  className,  ...props}: SnippetTabsTriggerProps) => (  <TabsTrigger className={cn('gap-1.5', className)} {...props} />);export type SnippetTabsContentProps = ComponentProps<typeof TabsContent>;export const SnippetTabsContent = ({  className,  children,  ...props}: SnippetTabsContentProps) => (  <TabsContent    asChild    className={cn('mt-0 bg-background p-4 text-sm', className)}    {...props}  >    <pre className="truncate">{children}</pre>  </TabsContent>);

Use Cases

This free open source React component works well for:

Installation guides - Package manager commands and setup instructions built with Next.js
API documentation - Code examples and request/response snippets using TypeScript
Tutorial content - Step-by-step code examples with multiple language support
Command references - CLI commands and terminal examples using shadcn/ui design
Configuration examples - Environment variables and config file snippets
Code samples - Reusable code blocks for documentation using Tailwind CSS styling

API Reference

Prop	Type	Default	Description
`children`	`ReactNode`	`undefined`	SnippetTab components or content
`defaultValue`	`string`	`undefined`	Default active tab value
`className`	`string`	`undefined`	Additional CSS classes for the container
`onValueChange`	`function`	`undefined`	Callback when active tab changes

SnippetTab

Prop	Type	Default	Description
`value`	`string`	`undefined`	Unique identifier for the tab
`label`	`string`	`undefined`	Display label for the tab trigger
`children`	`ReactNode`	`undefined`	Content to display in the tab panel
`copyText`	`string`	`undefined`	Text to copy when copy button is clicked
`showCopyButton`	`boolean`	`true`	Whether to show the copy button
`copyTimeout`	`number`	`2000`	Duration in ms to show copy success state
`onCopy`	`function`	`undefined`	Callback when copy button is clicked
`className`	`string`	`undefined`	Additional CSS classes for tab content

Implementation Notes

Component built on Radix UI Tabs primitive ensuring accessibility and keyboard navigation
Copy functionality uses Clipboard API with fallback for older browsers
Tab system supports unlimited tabs with dynamic content and conditional rendering
Copy success feedback includes visual state changes and configurable timeout duration
Content supports both plain text and rich JSX elements for flexible display options
Responsive design adapts tab layout and copy button positioning across device sizes
Compatible with shadcn/ui design system and Tailwind CSS utility classes
Error handling includes clipboard permission checks and graceful fallbacks
Performance optimized with lazy loading and efficient re-rendering for large tab sets
TypeScript interfaces ensure type safety for tab configuration and callback functions

Snippet

Reactsnippet

Reactsnippet

On this page