CodeBlock is a code panel with a filename or language label, optional line numbers, marked lines and a copy button; long lines scroll inside the panel, which is a focusable region named by the filename.
CodeBlock is a code panel with a filename or language label, optional line numbers, marked lines and a copy button; long lines scroll inside the panel, which is a focusable region named by the filename. Plain text, no highlighting. The panel is always the ink terminal, in both themes; marked lines get an olive band with a lime edge. CopyButton copies any value and announces "Copied". Client component. In a custom grid, give the grid grid-cols-1 (or the cell min-w-0), or on phones the column grows to the longest line and the page scrolls sideways. As a code-sample band, put it straight under a SectionHeader that carries the lead text, with no second lead beside it.
It is part of Swiss Tech Mono. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
CodeBlock is a code panel that stays on the ink set in both themes: a paper-2 bar with a mono cell label (filename bold, language at the end) and a copy key, optional line numbers and marked lines (a volt wash with a volt bar at the start); long lines scroll inside the panel, which is a focusable region named by the filename.
CodeBlock is a sunken code panel (bg-well) with a mono filename label, a language badge, optional line numbers, marked lines (an aurora edge and a soft green wash) and a copy button; long lines scroll inside the panel, which is a focusable region named by the filename.
CodeBlock is a code panel with a filename or language label, optional line numbers, marked lines and a copy button; long lines scroll inside the panel, which is a focusable region named by the filename.