Code

Inline code in text, and a block with a title, a copy button and optional tabs.

Inline

A code element in text gets a soft frame and the mono font.

Block

Terminal

yarn build

Card.jsx

<a className='card' href='/docs'>…</a>

Example.jsx

import { Code } from './components/Code'

<Code code='yarn build' />
<Code code={source} label='Card.jsx' icon='file' />

The block follows the mode: light on a light page, dark on a dark one. Copy puts the text on the clipboard and says so for two seconds.

With tabs

Terminal

yarn add react-icons

Example.jsx

<Code variants={[
  { label: 'yarn', code: 'yarn add react-icons' },
  { label: 'npm', code: 'npm install react-icons' },
  { label: 'pnpm', code: 'pnpm add react-icons' },
]} />

Variables

Variable	Default	What it sets
`$code-background`	`var(--surface)`	background of the block
`$code-bar`	`var(--page)`	background of the title bar
`$code-text`	`var(--text)`	text colour
`$code-muted`	`var(--muted)`	title and buttons
`$code-line`	`var(--line)`	border and active tab
`$code-radius`	`12px`	corner radius