Components

Everything on this site, installable

The site is built from these, so what you install is what you are looking at. Every preview below is the real component running, not a picture of one.

Add the registry once

export CTA_REGISTRY=https://adamjurek.com/r/registry.json

Frontmatter

Parsing

No dependencies

A small frontmatter reader for `key: value` and inline lists. Not YAML, deliberately.

Preview: No UI - it reads the metadata block off a file

Input

Forms

No dependencies

A text input, and only the drawing of one - state and labels belong to the form and to Field.

Preview: A text field wearing the site's focus ring

Kbd

Text

No dependencies

A key, drawn as one. Semantically <kbd>, visually the chip the command palette already wears.

Preview: Esc and ⌘K, drawn as keys

Native Select

Forms

No dependencies

The platform's own select in the site's clothes - the phone wheel and the OS menu, kept.

Preview: A select with the chevron put back

Progress

Loading

No dependencies

The native progress element, restyled - omit value and the indeterminate state is real.

Preview: A bar part- filled in the accent

Questions

Documents

No dependencies

The questions a page expects to be asked. Given an onAsk, each one is a button that puts itself to an assistant; without it, a plain list.

Preview: Three questions, pressable

Radio Group

Forms

No dependencies

Radios in a fieldset - the one grouping screen readers announce without help.

Preview: Three options, one chosen

Skeleton

Loading

No dependencies

The wait, drawn as the thing being waited for: a line, a block or a circle, shimmering unless motion is reduced.

Preview: Three placeholder shapes, sweeping

Slider

Forms

No dependencies

A native range input with its label - keyboard steps and form value ship in the element.

Preview: A range track in the accent

Spinner

Loading

No dependencies

One ring, one border, one turn - with a visually hidden label, because a spinner with nothing to announce is just an animation.

Preview: A ring turning beside its label

Switch

Forms

No dependencies

A checkbox that admits it: a real input with role=switch, and a track :checked drives.

Preview: A thumb sliding along its track

Table

Data

No dependencies

A table that is a table: declared columns, right-aligned numbers, sideways scroll in its own frame.

Preview: Headers, rows and tabular numbers

Textarea

Forms

No dependencies

A textarea in the same clothes as Input, growing with its content where the browser allows.

Preview: A paragraph-sized field

Toast

Feedback

No dependencies

Strings, four seconds, bottom corner, announced politely - one provider and one hook, nothing else.

Preview: A message rising in the corner

Toggle

Actions

No dependencies

A button that stays down, and the single-select group of them - aria-pressed is the whole contract.

Preview: A pressed toggle in a group of three

Tooltip

Feedback

No dependencies

One line on hover and focus, in the markup rather than in title= - and never carrying controls.

Preview: A word with its one-line answer above it

Typography

Text

No dependencies

The type scale as components: Heading with outline and size separated, the Label eyebrow, the Lead. One decision, made once.

Preview: A label, a heading and a lead, in the site's own scale

Video Player

Media

No dependencies

A video held behind a picture of itself. The player is a child, so it mounts on play and unmounts on stop - no vendor, no bytes and no cookies until somebody asks.

Preview: A poster with a play button, and the frame it reserves