Typography

Code

Monospaced source text, inline or block.

Server-renderable1 export

Inline code sits within a sentence. Block code renders inside a `<pre>` so whitespace and line breaks survive, and scrolls horizontally rather than widening the page.

Import

import { Code } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/code.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Inline and block

Run pnpm install to begin.

const theme = "dark";

<Stack gap={3}>
  <Text>Run <Code>pnpm install</Code> to begin.</Text>
  <Code variant="block">{`const theme = "dark";`}</Code>
</Stack>

Props

Code props. All native attributes of the underlying element are also accepted and forwarded.
Prop	Type	Default	Description
variant	`"inline" \| "block"`	`"inline"`	Inline within prose, or a standalone block.

Accessibility

Long block content scrolls inside its own container, so the page body never scrolls horizontally.