All components
Data Display
CodeBlock
stable
Dark code surface for a command or snippet: plain monospace text, horizontal scrolling for long lines, and a copy affordance on web.
Data Display
primitive
Display
Documented
import { CodeBlock } from '@ivim/native/components/internal';
When to use
Use when
You are showing a command to run or a short block of code to copy verbatim.
The content must be read exactly, character for character, with no reflowing.
Don't use when
The text is prose that should wrap to the reader — use Text.
You need syntax highlighting or an editable field — CodeBlock renders plain, read-only monospace.
Example
Preview
Code
Examples
A command
npm install @ivim/native/components
A multi-line snippet
<Button tone="brand" onPress={submit}>
Save changes
</Button>
Long line (scrolls horizontally)
const url = "https://api.ivim.health/v1/members/00000000-0000-0000-0000-000000000000/orders?status=processing";
Without the copy button
npm install @ivim/native/components
Anatomy
The parts that compose this component.
1
Surface
A dark, rounded container that sets the code apart from the surrounding page.
2
Code
Monospace text in a horizontally scrolling row — long lines are never soft-wrapped.
3
Copy button
An overlay affordance on web that writes the code to the clipboard and confirms with a check.
Guidelines
Do
Keep each snippet to the smallest runnable unit — a single command or a focused block reads faster than a whole file.
Do
Let long lines scroll horizontally rather than pre-wrapping them by hand, so what is shown matches what is copied.
Don't
Rely on the copy button off web — native has no clipboard here, so the affordance is hidden and the code must stand on its own.
Props
Public props for this component. Required props are marked; defaults reflect the component implementation.
code
string
The text to display, rendered verbatim as monospace.
showCopy
boolean
default: true
Show the copy affordance. Web only — native has no clipboard binding, so the button never renders there regardless.
Accessibility
Roles and screen-reader behavior this component provides, plus keyboard interactions.
•
The copy control is a labelled button; its label flips to "Copied to clipboard" for a moment after a successful copy.
•
Copy is web-only — where there is no clipboard the button is not rendered, so nothing announces an action that cannot happen.
•
Long lines scroll rather than wrap, so the reading order stays a single logical line.
Platform & RTL
Behavior that differs across the platforms this component runs on.
Web
Shows the copy button (when showCopy is left on) and writes to navigator.clipboard.
iOS
No copy button — there is no clipboard binding here, so the code is display-only.
Android
No copy button, same as iOS.
RTL
Code stays left-to-right; source is read in logical order regardless of writing direction.
State coverage
Interaction and visual states this component supports.
base
semantic color
density
Token references
Semantic design tokens this component page exercises. Tap one to edit it live.
Related components
Components that solve adjacent problems or compose with this one.
Input
Single-line text entry, with TextField for labelled fields and InputGroup for adornments, prefixes, and attached controls.
Table
Data-driven table for dense screens: sortable columns, multiple row selection, and full table accessibility roles.
Button
Action control with four emphasis variants, three semantic tones, five sizes, icon slots, loading, and navigational semantics.