Code block

Code in a black well with an ink border, in the host's monospace face, with a copy button and marked lines.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/code-block

Examples

Numbered, and a change

route.ts

const route = plan("rail-yards", "north-gate");route.avoid("gate-4");await route.go();

route.avoid("gate-4");route.via("canal");await route.go();

code-block-diff.tsx

import {  CodeBlock,  CodeBlockActions,  CodeBlockContent,  CodeBlockCopyButton,  CodeBlockHeader,  CodeBlockLine,  CodeBlockTitle,} from "@/components/zero/code-block";const route = `const route = plan("rail-yards", "north-gate");route.avoid("gate-4");await route.go();`;export default function CodeBlockDiff() {  return (    <div className="grid w-full max-w-lg gap-4">      <CodeBlock>        <CodeBlockHeader>          <CodeBlockTitle>route.ts</CodeBlockTitle>          <CodeBlockActions>            <CodeBlockCopyButton value={route} />          </CodeBlockActions>        </CodeBlockHeader>        <CodeBlockContent lineNumbers>{route}</CodeBlockContent>      </CodeBlock>      <CodeBlock size="sm">        <CodeBlockActions>          <CodeBlockCopyButton value={'route.via("canal");'} />        </CodeBlockActions>        <CodeBlockContent>          <CodeBlockLine variant="removed">            route.avoid("gate-4");          </CodeBlockLine>          <CodeBlockLine variant="added">route.via("canal");</CodeBlockLine>          <CodeBlockLine variant="highlighted">await route.go();</CodeBlockLine>        </CodeBlockContent>      </CodeBlock>    </div>  );}

Behaviour

An optional header holds a title and actions; without one, the actions sit in the corner and show when the block is pointed at. CodeBlockCopyButton copies the code and shows a check for two seconds.

CodeBlockContent numbers its lines with lineNumbers and wraps long lines with wrap; otherwise it scrolls sideways. CodeBlockLine marks a line added (the accent edge and a +), removed (red and a −) or highlighted. It does not colour the code itself: pass highlighted spans as children if you need that.

Props

CodeBlock

Prop	Type	Default	Description
variant	"default" \| "danger"	"default"	An ink border, or red for an error.
size	"default" \| "sm"	"default"	Text size and padding.

CodeBlockContent

Prop	Type	Default	Description
lineNumbers	boolean	false	Number each line (string children).
wrap	boolean	false	Wrap long lines instead of scrolling.
startLine	number	1	The first line's number.

CodeBlockLine

Prop	Type	Default	Description
variant	"default" \| "added" \| "removed" \| "highlighted"	"default"	How the line is marked.

CodeBlockCopyButton

Prop	Type	Default	Description
value	string	—	What it copies.