Code Block

Use Code Block to present readable source code with syntax highlighting and a built-in copy action. It supports filenames, line numbers, highlighted ranges, focused lines, and diff states without requiring a separate rendering pipeline in the consumer.

Preview

Reduce motion:Off

Inspect

greeting.tsx

Installation

Lucide

npx shadcn@latest add @sona-ui/code-block

Usage


export default function CodeBlockExample() {
  return (
    <CodeBlock
      code={`export function Greeting() {
  return <h1>Hello, world!</h1>;
}`}
      language="tsx"
      filename="greeting.tsx"
      showLineNumbers
    />
  );
}

Props

Property	Type	Default	Description
`code`	`string`	`required`	Source code to render.
`language`	`string`	`"tsx"`	Language identifier used for syntax highlighting.
`filename`	`string`	`undefined`	Optional filename shown in the header.
`showLineNumbers`	`boolean`	`false`	Shows a numbered gutter.
`highlightLines`	`number[] \| string`	`undefined`	Lines to emphasize, as numbers or a comma-separated range.
`showDiff`	`boolean`	`false`	Removes leading diff markers and styles added or removed lines.
`focusLines`	`number[] \| string`	`undefined`	Lines to keep visually focused.
`className`	`string`	`undefined`	Additional classes for the code block.

Accessibility

The copy action is a labeled native button. Keep the source text complete and understandable without relying only on syntax color, highlighted backgrounds, or diff color.

When showing a diff, retain the surrounding explanation so added and removed lines have context.

Styling

The component owns scrolling, code spacing, syntax colors, and the optional header. Use className to adjust its outer surface or fit it into a wider documentation layout.

Was this component useful?

Your feedback helps us improve the documentation.

Sona UI

Code Block

Preview

Examples

Highlighted lines

Diff

Focused lines

Installation

Usage

Props

Accessibility

Styling