Code

Monospace code, either inline in a tray chip or as a multi-line block. Syntax highlighting is left to you.

Import the stylesheet once with @merid/react/styles.css.

<Text>
Import the stylesheet once with <Code>@merid/react/styles.css</Code>.
</Text>

Import

tsx

import { Code } from "@merid/react";

variant="block" renders <pre><code> for multi-line snippets. Whitespace is preserved and long lines scroll horizontally.

npm i @merid/react
import "@merid/react/styles.css";

<Code variant="block">
{'npm i @merid/react\nimport "@merid/react/styles.css";'}
</Code>

Code forwards its ref to the <code> (inline) or <pre> (block) and passes other HTML attributes to that element.

Prop	Type	Default	Description
`variant`	`"inline" \| "block"`	`"inline"`	inline renders <code> in a tray chip; block renders <pre><code>.

Hook	Values
`.mrd-code`	Root: <code> or <pre>
`data-variant`	`inline` · `block`

To add highlighting, pass pre-highlighted children or style the inner code element from your highlighter's output.

Code is read as plain text. A block that overflows horizontally should be reachable by keyboard; add tabIndex={0} and an aria-label to the block when snippets can be wide.

Use inline Code for identifiers, file names and short commands inside a sentence.

Avoid

Wrap whole paragraphs or UI labels in Code for a “technical” look.