Snippet

Read and copy a complete code or text value.

Preview

npm run design-tokens

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/snippet.json

Basic usage

123import { Snippet } from "@/components/ui/snippet";

<Snippet value="npm run build" language="bash" />

Snippet owns the value and copy feedback. The caller owns its label, content and surrounding layout.

Structures

A headed snippet places its title and optional source tabs in one header. That header and the value share one secondary surface, with a divider below the header. Without a heading or source tabs, the value stays a single surface. Inline snippets remain transparent.

Examples

Basic value

Use the basic variant for a short command or value.

npm run design-tokens

Block code

Use the block variant when the value needs a padded code surface.

12const tokens = await loadDesignTokens();
applyTheme(tokens);

Inline command

Place an inline snippet inside a sentence. Its copy action appears on hover or focus.

Run npm run typecheck before opening a pull request.

Text with a heading

Use contentType="text" for caller-owned prose. A title creates the headed surface and divider.

Release note

The component is ready for review.\nCheck the narrow layout before merge.

Header without a divider

Set headerSeparator={false} when the heading and value share a surface without a divider.

Deployment

Preview is ready.

Long content

Set collapsible to disclose a long value. The default collapseMode="truncate" keeps a line-limited body and offers Show more when the value exceeds initialLines.

Response payload

1234567{
  "task": "Review onboarding flow",
  "status": "backlog",
  "assignee": null,
  "labels": ["product", "design"],
  "createdAt": "2026-10-09T09:00:00Z"
}

Hidden source

Set collapseMode="hide" with collapsible to keep source hidden until requested. The headed action area shows View Code while closed and Copy while open. Copy is disabled for an empty source.

Deploy preview

Source choices

Use sources for alternate values. Tabs keep the active source and copy action together.

API request

curl https://api.example.com/tasks

Empty value

An empty source shows its empty message and disables Copy.

No source

No source.

Accessibility

Source choices use Tabs keyboard behavior. Disclosure exposes aria-expanded and aria-controls; copy feedback uses a live status. Empty and disabled values cannot be copied. A rejected copy handler shows an error message.

API reference

Snippet properties
Prop	Type	Description
`children`	`ReactNode`	Optional basic or block body content. Compose a code structure in the Snippet surface; source copy controls are omitted for caller-owned content.
`value`required	`string`	Source value. Required even when sources supplies the displayed choices.
`variant`	`SnippetVariant`	Surface layout: basic (default), block, or inline.
`contentType`	`SnippetContentType`	Render code (default) or plain text.
`language`	`string`	Syntax language. Defaults to tsx.
`title`	`string`	Optional heading in the shared secondary surface.
`headerSeparator`	`boolean`	Shows the divider below a real header. Defaults to true.
`icon`	`React.ReactNode`	Optional decorative heading icon.
`sources`	`SnippetSource[]`	Optional source choices. More than one source renders tabs.
`activeSource`	`string`	Controlled active source id.
`defaultSource`	`string`	Initial active source id when uncontrolled; defaults to the first source.
`onSourceChange`	`(sourceId: string) => void`	Called when the active source changes.
`expanded`	`boolean`	Controlled disclosure state.
`defaultExpanded`	`boolean`	Initial disclosure state when uncontrolled. Defaults to false.
`onExpandedChange`	`(expanded: boolean) => void`	Called when disclosure changes.
`collapsible`	`boolean`	Enables disclosure. Defaults to false.
`collapseMode`	`SnippetCollapseMode`	truncate (default) limits visible lines; hide removes the closed body. Hide mode requires collapsible.
`expandLabel`	`string`	Closed disclosure label. Defaults to Show more.
`collapseLabel`	`string`	Open disclosure label. Defaults to Show less.
`sourceTabVariant`	`"line" \| "segmented"`	Source tab style. Defaults to segmented.
`sourceTabSize`	`"sm" \| "base"`	Source tab size. Defaults to sm.
`sourceTabsActivateOnFocus`	`boolean`	Activate source tabs on focus. Defaults to false.
`initialLines`	`number`	Collapsed line limit for truncate mode. Defaults to 8; values are floored and clamped to at least 1.
`maxExpandedLines`	`number`	Scrollable line limit when expanded. Defaults to 24; values are floored and clamped to at least 1.
`onCopy`	`(value: string) => void \| Promise<void>`	Optional copy handler. Rejection shows copy failure feedback.
`disabled`	`boolean`	Disables copying. Defaults to false.
`className`	`string`	Class added to the Snippet root.

SnippetSource accepts id, label, and value, with optional language, icon, filename, copy feedback labels, and emptyLabel.