127 Components
Copy Code Block
CardsMulti-tab CLI and code snippet block with sliding spring package-manager tabs (npx, pnpm, bun, yarn), optional line numbers, and one-click clipboard copy feedback.
Terminal
$npx boseui add magnetic-buttonInstallation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/copy-code-block.json"
Props
TypeScript props supported by <CopyCodeBlock />.
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | CodeSnippetTab[] | — | Array of tabs ({ id, label, code, language }) displayed in the header bar. |
| code | string | — | Optional single code string when multiple tabs are not needed. |
| title | string | "Terminal" | Header label used when a single `code` prop is provided. |
| showLineNumbers | boolean | false | Displays line numbers next to multi-line code snippets. |
| showPromptPrefix | boolean | true | Displays a `$` terminal prefix before single-line commands. |
| onCopy | (copiedText: string) => void | — | Callback fired when the active snippet is copied. |
| className | string | — | Additional Tailwind CSS classes for the outer card. |
Key Features
- Spring-animated tab pill indicator for switching between npx, pnpm, bun, and yarn or multiple files.
- One-click clipboard copy button with animated Check/Copy icon transition.
- Supports single-line CLI prompts ($) as well as multi-line code blocks with line numbers.
Keyboard & Accessibility
- Uses native button elements with focus-visible rings for tab switching and clipboard copy.
- Provides explicit aria-label on the clipboard button.
- Respects prefers-reduced-motion for tab indicator transitions.