Code Block

Displays syntax-highlighted code on a dark surface, in the Clinia code palette.

When to use

Code users read or copy: an install command, a usage snippet, an API response.

When not to use

A key or a shortcut: use Kbd.
A token or prop name inside a sentence: use inline code.

Install

npx shadcn@latest add @clinia/code-block

Preview

// Greet the patient in their language
export function greet(name: string, locale = "fr") {
  return locale === "fr" ? `Bonjour ${name}` : `Hello ${name}`;
}

bash

# Add the code block from the Clinia registry
npx shadcn@latest add @clinia/code-block

json

{
  "style": "base-luma",
  "rsc": true,
  "registries": {
    "@clinia": "https://ui.clinia.dev/r/{style}/{name}.json"
  }
}

Usage

tsx

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

// Any string works: a file, a snippet, an API response
const example = 'const greeting = "Bonjour";';

export default function Page() {
  return <CodeBlock language="ts" code={example} />;
}

Clinia rules

Pass a Shiki language id (tsx, bash, json). It becomes the block's label, so it's never left out.
CodeBlock is an async server component: it highlights at render time and ships no highlighter. Render it from a server component.
Keep snippets copy-ready: no $ prompt before commands, no output mixed into the code.
The block stays dark in both site themes. Don't override its surface or token colours.

States

default · pointer over the block

bash

# Add the code block from the Clinia registry
npx shadcn@latest add @clinia/code-block

focus · copy button

bash

# Add the code block from the Clinia registry
npx shadcn@latest add @clinia/code-block

Focus cells apply the component's focus-visible classes statically. Toggle the site theme to review both themes.

Accessibility

Built in

Every token colour clears 4.5:1 on the block's dark surface, and the block stays dark in both site themes.
Long lines scroll horizontally inside the block; the page itself never scrolls sideways.
The copy button appears on hover and stays reachable by keyboard: it shows on focus, and on touch screens it is always visible. A live region announces the copy.
Line numbers are CSS pseudo-elements, so they stay out of text selections and out of the copied code.

Your responsibility

Say what the code does in the sentence before it. The block alone doesn't explain its purpose.
Keep lines short enough to read without scrolling where you can. Long lines scroll inside the block.

How to test

Press Tab into the block: the copy button appears with a focus ring.
Press Enter: the code is copied, and a screen reader announces Code copied to clipboard.
Paste the result: it contains no line numbers.
Switch the site to the light theme: the block stays dark and every token stays readable.

API

Prop	Values	Default	Description
code	`string`	–	The source to show, as a string. Trailing whitespace is trimmed.
language	`string`	–	A Shiki language id, such as `tsx`, `bash` or `json`. Shown as the block's label.