Skip to content
Components

Code

Monospace code - inline <code> by default (a muted, rounded chip sized to surrounding text), or a scrollable <pre><code> block when block is set. Token-styled and RSC-safe.

import { Code } from
  "@instruments/materia-ui/components/code";

Usage

import { Code, CodeProps } from "@instruments/materia-ui/components/code";

Best practices

  • Use inline Code for identifiers/values in a sentence and block for multi-line snippets - Kbd is for keyboard keys, not code.

  • block renders <pre><code> that scrolls horizontally; add whitespace-pre-wrap via className only when wrapping beats scrolling (long prose-like messages).

Props

PropTypeDefaultDescription
blockbooleanfalse

Render a multi-line block (<pre><code>) instead of inline <code>. The block scrolls horizontally rather than wrapping.

Also exports

  • interfaceCodeProps