Code Block

Displays code, terminal output and diffs with an optional header, line numbers and a copy button. Pass language for Shiki Dark+ highlighting. Content stays dir="ltr".

Syntax Highlighting

Set language on CodeBlockContent (e.g. language="tsx") for Dark+ colors.

Installation

CLI

npx @sonojs/ui@latest add code-block

Also needsnpx @sonojs/ui@latest add button use-highlighted-code && npm i lucide-react shiki

Usage

code-block.tsx

import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockTitle,
} from "@/components/ui/code-block"

export function Example() {
  const code = `import { Button } from "@/components/ui/button"

export function SaveBar() {
  return <Button>Save changes</Button>
}`

  return (
    <CodeBlock>
      <CodeBlockHeader>
        <CodeBlockTitle>save-bar.tsx</CodeBlockTitle>
        <CodeBlockActions>
          <CodeBlockCopyButton value={code} />
        </CodeBlockActions>
      </CodeBlockHeader>
      <CodeBlockContent language="tsx" lineNumbers>
        {code}
      </CodeBlockContent>
    </CodeBlock>
  )
}

Props

Prop	Type	Default	Description
variant	"default" · "destructive"	"default"	Tone of the block surface.
size	"default" · "sm"	"default"	Density. Small suits tool / trace output.
language	string	—	On CodeBlockContent — Shiki id (`tsx`, `json`, `bash`, …).
wrap	boolean	false	On CodeBlockContent — wrap long lines.
lineNumbers	boolean	false	On CodeBlockContent — show a line number gutter.
startLine	number	1	On CodeBlockContent — first line number in the gutter.