Typography
Code Block
A block for multi-line code. It shows a language label, a one-click copy button, and optional line numbers. For inline code, reach for the Code component.
ReactVueWeb Components
View in Storybook Playground
Examples
<CodeBlock language="tsx" showLineNumbers>
{source}
</CodeBlock>Props
| Name | Type | Default | Description |
|---|---|---|---|
code | string | — | The code string to display. Takes priority over children. |
language | string | — | Language label shown in the header bar (e.g. `'tsx'`, `'bash'`). |
showLineNumbers | boolean | false | Prepend 1-based line numbers. @default false |
copyable | boolean | true | Show a copy button in the header bar. @default true |
copyLabel | string | Copy | Accessible label for the copy button. @default 'Copy' |
copiedLabel | string | Copied | Label shown after a successful copy. @default 'Copied' |
children | ReactNode | — | Fallback when `code` is not provided. |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.