Skip to content
UI Kit
Accent color

Code and JSON

Code blocks with file tabs, line numbers, highlights and a terminal style, and JSON viewers that fold, search and copy paths.

2 components · 8 variants
Switch category

code-block

Code block

Code with file header, tabs, copy button, line numbers, highlights and diffs. Syntax colors come from the theme and the accent.

Props and details · Code block

Single file

File name, language, copy and line numbers. Long lines scroll inside the block, never the page.

Tabs

Several files in one block. Arrow keys move between the tabs, the copy button takes the open file.

Highlights and diff

Lines that matter carry a light accent band. In a diff, added and removed lines get a marker and are announced to screen readers.

Terminal

A shell window. Commands carry a prompt, output stays quiet, copy takes only the commands.

json-viewer

JSON viewer

JSON you can read. A tree that opens and closes with the keyboard, counts on closed branches, values tinted by type, and a click on a key copies its path.

Props and details · JSON viewer

Tree

Two levels open at the start, chevrons and arrows open the rest, guide lines show the depth. Open all, close all and copy sit in the bar, the path of a clicked key shows below.

Open in Studio

Table

An array of objects as a table with a column per key, a switch back to the tree. Nested values show their size, missing ones a dot.

Open in Studio

API response

The answer of a request with method, path, status, time and size, the body as a tree and the headers on a second tab. The status light pulses twice on arrival.

Open in Studio

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Code and JSON on a page.

Often searched

Jump to

Copied to the clipboard