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.

TSX


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. No layout concerns beyond the outer frame. The header and content render as independent rows.


Prop


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.


Prop


CodeBlockTitle


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


Prop


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.


TSX


Prop


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.


TSX


Prop