Code Block

Source shown honestly: mono, copyable, highlighted.

v1.0.0·Updated Jul 10, 2026 · 23:00

◇ Open the Figma file ↗✳ Start building with Claude ↗

Live Demo — Fully Interactive

Language label, one-click copy, restrained token colour

tsx

1
2
3
4
5
6
7
8
9
10
11
import { useState } from "react";

// Optimistic like — render the result first
function Like({ id }) {
  const [liked, setLiked] = useState(false);
  return (
    <button aria-pressed={liked} onClick={() => setLiked(!liked)}>
      {liked ? "★" : "☆"}
    </button>
  );
}

Configuration

Language

Line numbers

Wrap

tsx

1
2
3
4
5
6
7
8
9
10
11
import { useState } from "react";

// Optimistic like — render the result first
function Like({ id }) {
  const [liked, setLiked] = useState(false);
  return (
    <button aria-pressed={liked} onClick={() => setLiked(!liked)}>
      {liked ? "★" : "☆"}
    </button>
  );
}

<CodeBlock language="tsx" showLineNumbers />

Behavior — The Engineering Contract

Prop	Type	Notes
language	string	Shown uppercase in the header; drives token classes
children	string	The source; whitespace preserved verbatim
showLineNumbers	boolean	Gutter of right-aligned, unselectable line numbers
wrap	boolean	Soft-wrap long lines instead of scrolling
onCopy	(text) => void	Fires after the clipboard write resolves

Event / Key	Result
Click Copy	Writes to clipboard, flips label to “Copied ✓” for 2s
Enter · Space	Activates the focused Copy button
⌘/Ctrl + C	Native selection copy still works — the button is a shortcut

Copy is an optimistic gesture: the label flips to success the instant you click, then the clipboard write happens. If it fails, the label rolls back honestly. Try it —

shell

$ npm install @optimistic/ui
# 54 components, one warm accent
$ optimistic sync --tokens
✓ reconciled · 142ms

Anatomy

css

.o-btn {
  background: #ff7a00; /* the one warm accent */
  color: #1a0e04;
  border-radius: 8px;
  height: 40px;
}
.o-btn:hover { filter: brightness(1.05); }

1HeaderThe bar carrying the label and copy control.

2Language labelUppercase mono, so the reader knows the dialect.

3Copy buttonOne click to clipboard; flips to “Copied ✓”.

4BodyPre-formatted code; whitespace kept, scrolls if long.

5TokensRestrained highlight: warm keyword, one cool hue, greys.

Do's and Don'ts

✓ Do

shell

$ npm install @optimistic/ui
# 54 components, one warm accent
$ optimistic sync --tokens
✓ reconciled · 142ms

Label the language and offer copy. Small courtesies developers feel every time.

✕ Don't

const x = 42

Don't use a full block for an inline token — reach for Keyboard Input or plain code text.

✓ Do

function save() { … }

Keep highlighting restrained — one warm accent for keywords, greys for the rest.

✕ Don't

function save() {}

Don't rainbow every token. Noise buries the one thing worth noticing.

In context: Examples

A · Docs snippet

tsx

import { useState } from "react";

// Optimistic like — render the result first
function Like({ id }) {
  const [liked, setLiked] = useState(false);
  return (
    <button aria-pressed={liked} onClick={() => setLiked(!liked)}>
      {liked ? "★" : "☆"}
    </button>
  );
}

A component example in a guide, copyable in one click.

B · Token reference

css

.o-btn {
  background: #ff7a00; /* the one warm accent */
  color: #1a0e04;
  border-radius: 8px;
  height: 40px;
}
.o-btn:hover { filter: brightness(1.05); }

CSS custom properties shown honestly, verbatim.

C · Install command

shell

$ npm install @optimistic/ui
# 54 components, one warm accent
$ optimistic sync --tokens
✓ reconciled · 142ms

A shell one-liner in a getting-started page.

Measurements & Tokens

Token	Value	Role
--code-bg	#0D0E11	Body surface
--code-head-bg	#121317	Header bar
--code-border	#1E1E1E	The site hairline
--code-radius	10px	Corner radius
--code-font	0.78rem / 1.75	Mono body size and leading
--cb-kw	#FF7A00	Keywords & tags — the one warm role
--cb-str	#8FBFA8	Strings — the single cool hue
--cb-cmt	#5B6069	Comments, grey italic

Code

<div class="o-code">
  <div class="o-code__head">
    <span class="o-code__lang">tsx</span>
    <button class="o-code__copy" onclick="copyBlock(this)">Copy</button>
  </div>
  <pre class="o-code__body"><code><span class="cb-kw">const</span> x = <span class="cb-num">42</span>;</code></pre>
</div>

Related Components

AccordionSections that expand one truth at a time.● documented DividerThe hairline. #1e1e1e, one pixel, everywhere.● documented FilterFaceted narrowing with visible, removable criteria.● documented