Code

Overview

Code renders inline <code> or block <pre><code> elements with monospace styling. Use it for displaying code snippets, terminal commands, variable names, and API references within documentation or UI.

Inline Code

Install with npm install @ds0/tokens to get started.

Code Block

import { Button } from '@ds0/react';

import { tokens } from '@ds0/tokens';

Usage

Inline Code

<p>Run <Code>npm install @ds0/primitives</Code> to get started.</p>

Block Code

<Code variant="block">
  {'const theme = useTheme();\nconsole.log(theme.resolvedTheme);'}
</Code>

Accessibility

Inline code inherits the reading context of its parent
Block code uses <pre> for preformatted content, which screen readers announce as a code block
For long code blocks, the container scrolls horizontally to preserve formatting

API Reference

Prop	Type	Default	Description
`variant`	`'inline' \| 'block'`	`'inline'`	Inline or block code
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Code content

AI Decision Guide

Use Code when:

Displaying variable names, function names, or file paths in text
Showing multi-line code snippets
Rendering terminal commands

Don't use Code when:

Displaying regular text → use Text
Syntax-highlighted code → combine with a syntax highlighting library

Component	When to Use Instead
Text	Regular text content

On this page