CodeSnippet

Displays code (inline, single-line, or multi-line) with an optional copy button, lightweight built-in syntax highlighting for bash/css/js/ts, and an optional terminal-window look

Category: display · WCAG 2.2-AA · display, code, snippet, copy, pre, syntax-highlighting, terminal, bash, css, js, ts

Variants

inline
single
multi

States

idle
copied

Props

Prop	Type	Default	Description
`code`	`string`	—	The code to display (and copy).
`variant`	`'inline' \| 'single' \| 'multi'`	`single`	inline = a <code> span; single = one-line <pre>; multi = multi-line <pre>.
`language`	`'bash' \| 'css' \| 'js' \| 'ts'`	—	Enables built-in syntax highlighting for the block variants; inline is never highlighted.
`terminal`	`boolean`	`false`	Renders terminal-window chrome (title bar with dots). Block variants only.
`title`	`string`	—	Optional label shown in the terminal title bar.
`showLineNumbers`	`boolean`	—	Show line numbers (multi only; ignored when language is set).
`showCopyButton`	`boolean`	—	Show the copy-to-clipboard button. Defaults true for single/multi, false for inline.
`labels`	`{ copy?: string; copied?: string }`	—	Overrides for the component’s user-visible strings (i18n).
`className`	`string`	—	Additional CSS class names merged onto the root element.

Design tokens

--cascivo-font-mono
--cascivo-color-text
--cascivo-color-text-muted
--cascivo-color-bg-subtle
--cascivo-color-surface
--cascivo-color-border
--cascivo-radius-surface
--cascivo-radius-control

When to use

Showing a command, token, or path the user is expected to copy
Displaying a short read-only code block in docs or UI
Inline code references inside flowing text (inline variant)

When not to use

An editable code input — use a textarea or code editor
Whole source files needing folding, diagnostics, or many languages — use a dedicated viewer; the built-in highlighter is a presentational scan for bash/css/js/ts only

How to build an accessible CodeSnippet in React →

Examples

Install command

<CodeSnippet code="npx cascivo add button" language="bash" />

Inline

<p>Run <CodeSnippet variant="inline" code="pnpm build" /> first.</p>

Terminal block

Multi-line shell transcript with terminal-window chrome.

<CodeSnippet
  variant="multi"
  language="bash"
  terminal
  title="deploy.sh"
  code={'pnpm build\npnpm deploy'}
/>

Related components

CopyButton — CodeSnippet embeds the same clipboard behavior for its copy affordance

← Back to docs