Snippet

npx shadcn add https://try.pungrumpy.com/r/snippet.json

A code snippet component with syntax highlighting support, copy functionality, and tabbed interfaces for multiple code examples.

npm install shadcn

How It Works

The component is built as a composition of smaller sub-components that work together to create a flexible code display system. Built on shadcn/ui's Tabs component, it supports multiple code examples through tabs, includes a built-in copy button with visual feedback, and features a terminal-style header with icon from phosphoricons.com.

1. Snippet — The root container that wraps everything using shadcn/ui's Tabs component, providing the foundation for tabbed interfaces
2. SnippetHeader — Displays a terminal icon and contains the tab navigation, creating a visual header that mimics a code editor window
3. SnippetTabsList & SnippetTabsTrigger — Styled tab controls that allow users to switch between different code examples
4. SnippetTabsContent — Contains the actual code content, wrapped in semantic <pre><code> elements with monospace font styling
5. SnippetCopyButton — A floating copy button that appears in the top-right corner, managing clipboard state with visual feedback (checkmark icon when copied)

The copy button uses the Clipboard API to copy code to the user's clipboard. It includes built-in state management that shows a checkmark icon for a brief moment after copying, providing clear visual feedback. The button supports custom onCopy and onError callbacks, making it easy to integrate with analytics or toast notifications.

The component uses a subtle background (bg-input/30) and rounded corners to create a distinct visual container that separates code from surrounding content. The terminal icon in the header reinforces the code context, while the copy button's opacity transitions create a polished, unobtrusive interaction pattern.