Code block

Shows code or commands to copy.

Styles

  • orders_by_region.sql
    -- Orders by region, last 7 daysselect region, count(*) as ordersfrom warehouse.orderswhere placed_at >= current_date - 7group by region;

    blockdefault

  • sodium run ingest-events --partition 2026-10-18

    command

Header

  • pipeline.yaml
    pipeline: ingest-eventsschedule: "0 * * * *"partition: hourly

    truedefault

  • pipeline: ingest-eventsschedule: "0 * * * *"partition: hourly

    false

Line numbers

  • YAML
    pipeline: ingest-eventsschedule: "0 * * * *"partition: hourly

    falsedefault

  • YAML
    pipeline: ingest-eventsschedule: "0 * * * *"partition: hourly

    true

States

  • SQL
    select count(*) from warehouse.orders;

    rest

  • YAML
    pipeline: ingest-eventsschedule: "0 * * * *"partition: hourly

    highlighted

  • SQL
    -- Orders by region, last 7 daysselect region, count(*) as ordersfrom warehouse.orderswhere placed_at >= current_date - 7group by region;

    wrapped

  • export SODIUM_KEY=

    secret hidden

  • sodium run ingest-events
    Queued run_8f2a91 on eu-west-2
    Done in 41.2s, 1,204,330 rows

    with output

Usage

When to use it
Use
A query, a config or a snippet to read or copy.
Use
A command to paste into a shell, with or without what it prints.
Not for
A whole file as a step of a pipeline, with the line that failed. Use Code window.
Not for
Structured output to fold and search. Use JSON view.
Not for
A job's output as it streams. Use Log viewer.

Rules

7 rules
Must
Show shell commands with variant="command" and their prompt, never a $ typed into a block. Because the command variant keeps the prompt and the printed output out of the copy, so a pasted command runs as is.
Must
Pass a key inside a command as secret, so it shows as dots and still copies whole. Because a key in plain sight ends up in screenshots and screen shares, and a masked one that copied dots would not run.
Never
Colour syntax with hues, yellow, or a theme from another library. Because colour in Sodium is status and yellow is the action, so a green string reads as a pass and a yellow keyword as a button; the tokens are ink at its steps.
Never
Set code in a label role or in capitals. Because code is a value read as written, and capitals change what it says; mono capitals are for interface words only.
Should
Give a file its filename; the language label is the fallback. Because the filename says where the code goes, which a language name does not.
Should
Highlight the lines the text talks about with highlight, never with a bar or a colour. Because the selection wash marks them as a place, and a screen reader hears "Highlighted".
Should
Set maxLines on code longer than about 30 lines, or show it in a Code window. Because a 200-line block pushes everything after it off the screen.

Accessibility

5 checks
The body is a focusable region named by the filename or the language while it scrolls, so a keyboard can scroll it.
Copy says "code copied" or how to copy by hand once in a status region; the cell keeps its name.
Line numbers and the prompt are aria-hidden and unselectable; a hidden secret reads "hidden secret".
Code is text-1, text-2 and text-3 on the well, 5.1:1 or better in both themes.
The wrap toggle is a pressed button named "Wrap lines"; its glyph says which way the lines run.

Keyboard

3 keys
Tab
Reaches wrap and copy, then the body while it scrolls.
Arrow keys
Scroll the focused body.
Enter
Presses the focused wrap, show or copy cell.

Edge cases

5 edge cases
Long line
Scrolls sideways; wrap breaks it anywhere instead.
Clipboard refused
The copy cell shows the warning glyph and says how to copy by hand; the code stays selectable.
Right to left page
Code stays left to right.
Narrow at 390
The language label hides; the filename truncates; the body scrolls.
Dark theme
The well and the panel step up from the near-black page; the ink steps flip with the tokens.

API

11 props
code
string
variant
'block' | 'command' default 'block'
language
'ts' | 'tsx' | 'js' | 'json' | 'bash' | 'python' | 'sql' | 'yaml' | 'text' default 'text'
filename
string
header
boolean default true
lineNumbers
boolean default false
highlight
number[] | string
defaultWrap
boolean default false
prompt
string default '$'
secret
string
maxLines
number

Tokens

14 tokens
--code-surface
var(--well)
--panel
#fafaf7
--line
#e2dfd5
--selected
#fff4bf
--type-code
400 13px/20px var(--font-mono)
--type-code-sm
400 12px/16px var(--font-mono)
--type-label-sm
400 12px/16px var(--font-mono)
--type-micro
400 11px/14px var(--font-mono)
--text-1
#161512
--text-2
#55524a
--text-3
#6b675e
--row-sm
32px
--control
32px
--focus
#7a5d00

By Arlan Marat

198

Install

For your coding agent

GitHub

Please star me pookie

198

Made by

Arlan Marat

A new design system every week

Leave your email before you copy the prompt.