Code

Monospaced text for code, inline in a sentence or as a block with line numbers and highlighting.

Run pnpm dlx shadcn@latest add button to install, then import Button from your components folder.

Fig. 1 Inline code inside Typeset gets a quiet background and the code font automatically.

One role for code

code-sm is 13px regular in the theme’s code font. It matches body-sm in size, so inline code sits level with the interface text around it.

pnpm dlx shadcn@latest add buttoncode-sm13 / 1.6 · 400
Fig. 2 The code role, measured.

Blocks belong in CodeBlock

For anything longer than a line, use CodeBlock. It adds line numbers, highlighting, wrapping, and a copy button, and it sits on the code surface in both themes.

Build it

Use the role on its own for short code outside Typeset:

type-roles.tsx