Code Block

Code on a flat strip of darkened stone, with a copy button in its corner. The copy button works on its own too.

Installation

npx shadcn@latest add https://osrsui.com/r/code-block.json

Usage

import { CodeBlock, CopyButton } from "@/components/ui/code-block"

<CodeBlock copyLabel="Copy the install command">npx shadcn@latest add …</CodeBlock>

{/* Highlighted code: pass the markup as children */}
<CodeBlock dangerouslySetInnerHTML={{ __html: html }} />

<CopyButton value="Remember your PIN" label="Copy the hint" />

CopyButton copies value (a string, or a function that returns one when it’s pressed) and shows a green tick for a moment. Its accessible name is label, and reads “Copied” while the tick shows.

The code font is var(--osrs-font-code), falling back to the system monospace; the game’s fonts have no code face.