CodeBlock
Preview appears after the next Storybook update.
<CodeBlock />When to use
Use it for
- A command the reader runs or pastes: an install line, an MCP server setup, a CLI call.
- A short snippet the reader copies as is: a CSS variable in use, an import line.
- Commands wrap, code scrolls (the default): a one-line command breaks at spaces only, never inside a package name or a flag, so the reader sees all of it; code with several lines keeps its layout and scrolls sideways inside the block. Set wrap to choose.
- hideCopy for code the reader should read, not paste: a file path, an example output.
- Plain-script pages that build rows as HTML strings use codeBlockHtml() and bindCodeBlocks() from @bridge-ds/react/dom: the same markup and the same copy behavior, without React.
Not for
- A token name or value inside a sentence or a table cell: use TokenValue.
- A whole file or a long diff: link to it, or show it in a dedicated viewer.
- Inline code in running text: use the code element of the page's prose styles.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
claude mcp add bridge -- npx -y @bridge-ds/mcpName what the code does
A short label above the block (Install, Add the MCP server) tells the reader which block to copy, and names the copy button for screen readers: Copy install.
npm install @bridge-ds/reactimport '@bridge-ds/react/styles.css';One command per block
Two steps are two blocks, each with its own label and copy button. The reader pastes one thing at a time and sees which one worked.
$ npm install @bridge-ds/reactA prompt sign in the code
The block copies exactly what it shows. A leading $ ends up in the terminal and the command fails.
npm install @bridge-ds/react && npx @bridge-ds/cli init && npx @bridge-ds/cli publishSeveral commands chained in one block
A row of commands joined with && is hard to read and fails as a whole. Split it into one block per step.
Accessibility
- The copy button is a real Button. With a string label it is named Copy plus the label (Copy install); after a copy it reads Copied.
- A polite live region announces Copied to the clipboard. If the clipboard is blocked, the code is selected and the region says to press Ctrl+C or Cmd+C.
- A block that does not wrap is keyboard focusable (tabindex 0), so a long line can be scrolled with the arrow keys. A wrapped block needs no focus stop.
- Copy works without hydration: statically rendered blocks carry data-code-block hooks and bindCodeBlocks() from @bridge-ds/react/dom wires them. Plain scripts render the same markup with codeBlockHtml().
- Code text uses color.text.default on color.bg.subtle, checked in both themes.
Content guidelines
- Label: what the code does, sentence case, no period: "Install", "Add the MCP server".
- Code: exactly what the reader pastes. No prompt sign, no placeholder the reader has to spot and replace without being told.
- When a value must be replaced, say so in the text above the block and name the value: "Replace acme/design-tokens with your repository".
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/CodeBlock/CodeBlock.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Container: label and plate
.root - What the code does
.label - Subtle plate holding the code and the copy button
.plate - Scroll area, focusable when lines do not wrap
.pre - Scroll area, focusable when lines do not wrap, focus
.pre:focus-visible
Motion and interaction
CodeBlock animates on hover and press. Try it in the preview at the top.
| When | What changes | Duration | Easing |
|---|---|---|---|
| Hover | Background | motion.duration.instant75 ms | motion.easing.standardsettles in place |
| Press | Background | motion.duration.instant75 ms | motion.easing.standardsettles in place |
With reduced motion turned on, every change happens at once.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/CodeBlock/CodeBlock.tsx, so this table cannot drift from the code. It also accepts every native <div> attribute except children, onCopy.
| Prop | Type | Default | Description |
|---|---|---|---|
coderequired | string | none | The code or command, shown as is and copied as is. |
label | ReactNode | none | What the code is, above the block: "Install", "Add the MCP server". Also names the copy button. |
wrap | boolean | none | Commands wrap, code scrolls. By default a one-line command wraps at spaces only (never inside a package name or a flag), so it is read whole and never hides behind the copy button; code with several lines keeps its layout and scrolls sideways inside the block. Pass `true` or `false` to choose. |
copyLabel | string | 'Copy' | The copy button text. Default "Copy". |
copiedLabel | string | 'Copied' | The button text after a copy, for two seconds. Default "Copied". |
hideCopy | boolean | false | Hide the copy button (code the reader should read, not paste). |
onCopy | (code: string) => void | none | Called after the code reached the clipboard. |
codeProps | HTMLAttributes<HTMLElement> & { [key: `data-${string}`]: string | undefined } | none | Attributes on the `<code>` element, for example an `id` a script reads or fills. |
Playground
Change the props and see the real CodeBlock update. Controls are generated from the TypeScript props; nothing here changes the system.
<CodeBlock code="npm install @bridge-ds/react" label="Install" />Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open CodeBlock in Storybook).
Embed Storybook stories here (10)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Default
NoLabel
LongCommandScrolls
LongCommandWraps
MultiLine
ReadOnly
CustomLabels
NarrowLongCommand
NarrowWrapped
AllStates
From the code Generated from the component, not editable here.
Changelog
No release note mentions CodeBlock yet.