Primitives
Snippet
Copyable code snippet for displaying shell commands or short code strings. Includes an inline copy button.
Installation
npm install @trinkui/reactImport
import { Snippet } from "@trinkui/react";Variants
$npm install @trinkui/react
$npm install @trinkui/react
$npm install @trinkui/react
Colors
$npx create-next-app
$npx create-next-app
$npx create-next-app
$npx create-next-app
$npx create-next-app
Without Copy Button
$npm install @trinkui/react
Props
| Prop | Type | Default | Description |
|---|---|---|---|
coderequired | string | — | The code/command text to display |
symbol | string | "$" | Prefix symbol shown before the code |
variant | "flat" | "bordered" | "shadow" | "flat" | Visual style variant |
color | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Text color theme |
copyable | boolean | true | Show a copy-to-clipboard button |
className | string | — | Additional CSS classes |
Accessibility
- Copy button has
aria-label="Copy to clipboard". - Copy button is keyboard-focusable with a visible
focus-visiblering. - Visual feedback (checkmark icon) confirms a successful copy.