Skip to content

Noir Aurora

Code Block

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.

Live, interactive React component · dark themeResponsive

About the Noir Aurora Code Block

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. Plain text, no highlighting. CopyButton copies any value and announces "Copied". Client component.

It is part of Noir Aurora. The style’s 91 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.

The same piece, drawn for a different look. Open one to compare it live.

Neo-Brutal Code Block

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.

Soft Bento Code Block

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.

Swiss Tech Mono Code Block

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.