docs / core / code-snippet

CodeSnippet

a code block with a copy button. the highlighting is painted from the theme's own tokens, so it never clashes with the surface it sits on the way a borrowed dark palette would.

intensity · recedesrsc · client

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

docs pages, Panel bodies, Dialog bodies, anywhere prose explains codeTerminal is the one-line sibling for shell commandsnot an editorone block per thing to copy, never nested

a11y

the copy button is labelledjest-axe

dependencies

highlight.js · Button from the same package
live demo · try it out
usagecopy
import { CodeSnippet } from "@usva-ui/react/primitives/code-snippet";

<CodeSnippet
  label="lib/utils.ts"
  language="typescript"
  code={source}
/>
customize
codethe text shown and copied
languagehighlight.js grammar, plain to skip
labelheader caption, empty for no header bar
notequiet right side of the header
copyableoff for output and logs
usagecopy
import { CodeSnippet } from "@usva-ui/react/primitives/code-snippet";

<CodeSnippet
  label="usage"
  code={source}
/>

props

proptypedefaultnotes
codestring—the text shown and copied.
languagestring"tsx"any grammar in highlight.js's common set. "plain" or an unknown name renders as-is.
labelReactNode—the header caption, e.g. a file path. without it there is no header bar.
noteReactNode—the quiet right side of the header bar.
copyablebooleantrueoff for output, logs, anything not meant to be pasted.
onCopied(value: string) => void—fires after a successful copy, never on a denied one.
preClassNamestring—extra classes for the scrolling pre, e.g. max-h-[32rem] for long sources.

get it

bun add @usva-ui/reactcopy
usagecopy
import { CodeSnippet } from "@usva-ui/react/primitives/code-snippet";

<CodeSnippet
  label="lib/utils.ts"
  language="typescript"
  code={source}
/>