Code Block
Display highlighted code with a file name or language, optional line numbers and a copy button.
import { CodeBlock, CodeTokens } from '@youj/react'
Installation & usage
npm i @youj/reactFor an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.
Use a code block to show code someone will read or copy: an install command, a config file, a snippet in a changelog or an empty state. It's the same block the Chat renders for fenced code in a model's answer. For code inside a sentence, use Typography's TypographyInlineCode.
import { CodeBlock } from '@youj/react'
export function InstallCommand() {
return <CodeBlock code="pnpm dlx @youj/cli@latest init" language="sh" />
}The header shows filename when you pass one, with the language value beside it as written (ts, sh), or else that value alone, or text. Long lines scroll sideways instead of wrapping, so indentation stays true; the scrollbar appears only when it's needed. lineNumbers adds a gutter that holds still while the code scrolls.
Description
A TSX snippet with a filename and line numbers.
The copy button copies code exactly. Its name and tooltip are copyLabel, "Copy code" by default. Pass actions to put your own controls in its place, such as a run button next to a copy button of your own.
Three blocks: a shell command, a diff and a JSON file.
Highlighting is a small built-in tokenizer: TypeScript and JavaScript (with JSX), C-like languages (Go, Rust, Java, C#, Swift, Kotlin, PHP), Python, Ruby, shell, JSON, CSS, HTML and XML, SQL, YAML and diffs. Anything else shows as plain text. It produces tokens, never HTML, so code from a user or a model can't inject markup. The colors are theme tokens, so they follow the theme in both modes.
Code
code-block-demo.tsx, the Demo story. The component itself comes from the package.
Reference
Propscode, language, filename… (8)
Props
| Prop | Type | |
|---|---|---|
codeRequired | stringThe source to show and copy. | – |
language | stringLanguage for highlighting and the header label: default '' | '' |
filename | stringA file name for the header, in place of the language. | – |
lineNumbers | booleanNumber the lines in a gutter that stays put while the code scrolls. default false | false |
copyLabel | stringThe copy button's name and tooltip. default "Copy code" | "Copy code" |
actions | ReactNodeReplaces the header's copy button, e.g. with your own actions. | – |
tail | ReactNodeDrawn at the end of the code, inside it: the caret of a streaming answer, say. | – |
sound | booleanWith sound on ( default true | true |
Other props pass through: extends ComponentProps<'figure'>. | ||
MotionCopied, back to rest · reduced motion
Motion
| Moment | Tokens | ||
|---|---|---|---|
| Copiedthe back sheet tucks behind the front one and a check is written on it | no token the copy icon’s own choreography | the copy icon’s own choreography | |
| Back to restafter a beat | no token 3 × deliberate | 3 × deliberate |
Reduced motion
The icon swaps to the check at once and back again, with no drawing.
Reduced motion
The copy icon swaps straight to its check and back. Everything else is the same.
AccessibilityKeyboard, ARIA, announcements
Accessibility
- The block is a
figurewhosefigcaptionholds the file name or language and the copy button. - The code sits in a scroll region named by the file name, or "TypeScript code" and so on, so a keyboard user can scroll a long line.
- The copy button is named by
copyLabel. Its tooltip says "Copied" after a copy, and the result is announced politely. A clipboard that refuses (no permission, an insecure page) is announced as "Couldn’t copy", not faked. - Line numbers are decorative (
aria-hidden) and can't be selected, so copying by hand takes only the code.