Code Block

A framed container for displaying source code.

Anatomy

The header is optional. Bring your own syntax highlighter and drop the rendered output into CodeBlockContent.

Clipping

Long snippets can be capped to a maximum height with a fade and a trigger to expand. Set clip on the root and tune the cap with maxHeight. The trigger is headless and only renders when the content actually exceeds the cap, so short snippets stay frictionless.

The root carries data-open when expanded and data-clipped when the body is currently being hidden. Both attributes are also forwarded to CodeBlockContent, and the trigger receives data-open. Style off these to rotate a chevron, swap a label, or react to the clipped state.

API

Reference for each part of the component, including its available props and behavior.

CodeBlock

Root container. A padded, ringed surface that stacks its children vertically. Owns the optional clip state and the collapsed height. Accepts open for the controlled flow, defaultOpen for the uncontrolled flow, and onOpenChange to mirror state. Sets data-open when expanded and data-clipped when the body is currently being hidden so descendants can style off the parent.

CodeBlockHeader

Optional. Top row of the block. Lays out children horizontally and centers them vertically. Typically holds a CodeBlockTitle on the left and a CodeBlockAction on the right.

CodeBlockTitle

Small muted label for the header. Use it for the language tag (TSX, BASH), a filename, or a short description.

CodeBlockAction

Right-aligned slot for header controls like copy, expand, or open in editor. Applies sensible sizing to nested buttons and icons so plain HTML works out of the box. Drop in a project-specific button when the defaults do not fit.

CodeBlockContent

The code surface. An inset, framed panel sized for monospaced text. Render a <pre> directly or the output of a syntax highlighter. Nested pre elements inherit a small text size so highlighted output blends in. When clip is enabled on the root, the panel measures its content, animates the height between maxHeight and the natural height, and fades the bottom while clipped.

CodeBlockTrigger

Headless toggle for the clipped state. Wires the open state, aria-expanded, and aria-controls to a rendered element of the caller's choice. Pass render to provide the styled button and children for the icon. The trigger has no default styling and no default icon, so it composes with whatever button family the call site already uses. Renders nothing when clip is disabled or when the content fits inside maxHeight, so it can sit in the action slot without leaving a hole for short snippets.