Add this component

npx zentauri-ui add code-block

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Utilities

Code Block for inline code display

The Code Block component renders a code surface with a language badge, optional line numbers, and a built-in copy-to-clipboard button. Use it in docs, blogs, and anywhere you display source code.

typescript

1function fibonacci(n: number): number {2  if (n <= 1) return n;3  return fibonacci(n - 1) + fibonacci(n - 2);4}5 6console.log(fibonacci(10)); // 55

Code Block variants playground

Pick an appearance, size, and toggle line numbers to preview the code block live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Appearance

Size

Line numbersHeader

tsx

1import { useState } from "react";2 3export function Counter() {4  const [count, setCount] = useState(0);5 6  return (7    <div>8      <p>Count: {count}</p>9      <button onClick={() => setCount(count + 1)}>10        Increment11      </button>12    </div>13  );14}

All appearances

Every shipped appearance token at a glance. Click any swatch to load it into the playground above.

tsx

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

tsx

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

tsx

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

tsx

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Code Block API

Generated from the package prop types and variant definitions.

CodeBlock

CodeBlockProps

Variants

Prop	Type	Default
appearance	`contrastdefaultglasssubtle`	default
size	`lgmdsm`	md

Behavior

Prop	Type	Default
code*	`string`	none
enableClipboard	`boolean \| undefined`	none
labels	`CodeBlockLabels \| undefined`	none
language	`string \| undefined`	none
showHeader	`boolean \| undefined`	none
showLang	`boolean \| undefined`	none
showLineNumbers	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CodeBlockVariant

CodeBlockVariantProps

Behavior

Prop	Type	Default
appearance	`'default' \| 'subtle' \| 'contrast' \| 'glass' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

CodeBlockAnimated

CodeBlockAnimatedProps

animated

Behavior

Prop	Type	Default
animation	`CodeBlockAnimation \| undefined`	none
appearance	`'default' \| 'subtle' \| 'contrast' \| 'glass' \| null \| undefined`	none
code*	`string`	none
enableClipboard	`boolean \| undefined`	none
labels	`CodeBlockLabels \| undefined`	none
language	`string \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLDivElement> \| undefined`	none
showHeader	`boolean \| undefined`	none
showLang	`boolean \| undefined`	none
showLineNumbers	`boolean \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CSS variable overrides

Code Block CSS variables

Override these code block variables on :root, a theme selector, or a component wrapper.

32 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-code-block-border: #0000001a;
  --zui-code-block-bg: oklch(98.4% 0.003 247.858);
  --zui-code-block-fg: oklch(20.8% 0.042 265.755);
  --zui-code-block-subtle-bg: oklch(92.9% 0.013 255.508);
  --zui-code-block-contrast-bg: oklch(16.8% 0.04 265.755);
  --zui-code-block-contrast-border: #334155;
  --zui-code-block-contrast-fg: #e2e8f0;
  --zui-code-block-glass-bg: #ffffffcc;
  --zui-code-block-glass-border: #ffffff66;
  --zui-code-block-header-bg: oklch(96.8% 0.007 247.896);
  --zui-code-block-lang-fg: #7c3aed;
  --zui-code-block-lang-bg: #7c3aed1a;
  --zui-code-block-action-fg: oklch(44.6% 0.043 257.281);
  --zui-code-block-action-hover-bg: #0000000d;
  --zui-code-block-code-fg: oklch(20.8% 0.042 265.755);
  --zui-code-block-line-number-fg: #94a3b8;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-code-block-border-dark: #ffffff1a;
  --zui-code-block-bg-dark: oklch(12.9% 0.042 264.695);
}

What it does

Each Code Block renders a bordered surface with a header that shows an optional language label and a copy button, followed by a scrollable <pre> block.

Use the showHeader and showLang props to toggle visibility of the header bar and the language badge independently.

Composition and API

Pass code as a string prop. Toggle line numbers with showLineNumbers and control clipboard behavior with enableClipboard.

Forward refs where you attach measurements or analytics. The component stamps data-slot attributes on every child element for easy custom styling.

Common use cases

Documentation sites showing code samples with language labels.
Blog posts that embed syntax-highlighted snippets.
API response viewers that display JSON or XML payloads.
CLI output panels in web-based terminal emulators.

Accessibility

The copy button is a native <button> with accessible labels. Line numbers are rendered as spans inside the <pre> element for screen reader compatibility.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Code Block component work with Next.js App Router?

Yes. Import it like any other React component; it is a client component that uses hooks for clipboard functionality, so keep it in client boundaries.

Can I customize the code block appearance with Tailwind CSS?

Zentauri UI exposes appearance variants (default, subtle, contrast, glass) and size options. You can further extend styles with className or override the underlying --zui-code-block-* CSS variables.

Does the Code Block component include syntax highlighting?

The component displays raw code text without a syntax highlighter. Pair it with a library like Prism or Shiki for tokenized highlighting in your application.