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.jsonGrid
Page structure
No dependencies
A responsive grid with no breakpoints in it. One number decides the column count at every width.
Preview: Cards reflowing from four columns to one
Item
Containers
No dependencies
One row of a list: tile, title, description, meta - the nav panel's anatomy, extracted for reuse.
Preview: Rows with toned tiles and right-aligned meta
Nav Bar
Page structure
No dependencies
A site header whose panels expand. Built on <details>, so it works before hydration and closes on Escape.
Preview: A header with a panel of categories open under it
Scroll Area
Containers
No dependencies
The named inner scroll: thin bar, and the smooth scroller handed back - the pair everyone forgets separately.
Preview: A list scrolling inside its frame
Section
Page structure
No dependencies
Kicker, heading and body, revealing top-down with an 80ms offset.
Preview: A kicker and heading revealing before the body
Separator
Page structure
No dependencies
A rule with two directions and an accessibility decision: announced when it separates content, silent when it is furniture.
Preview: A horizontal rule and a vertical one, holding things apart
Sheet
Overlays
No dependencies
The dialog docked to an edge, for content tall enough that centring it would mean scrolling a floating box.
Preview: A panel sliding in from the right
Spacer
Page structure
No dependencies
Vertical space on the scale, optionally with a rule and a label. For Markdown, where there is no markup to hang a margin on.
Preview: A labelled rule holding a gap open
Theme Toggle
Page structure
No dependencies
A segmented control that reports which option was pressed and knows nothing about themes. Roving focus, and `aria-checked` is the selector that draws it.
Preview: Three icons in a well, one lit
useDeskState
Overlays
No dependencies
Which windows are open, where they sit and what has been put away, remembered without breaking a server render.
Preview: No UI - it remembers where you left things
useDeviceKind
Scenes
No dependencies
Which machine the stylesheet is currently drawing, as a value. Null until mounted, on purpose - a default would be a claim the server cannot support.
Preview: No UI - it names the machine you are looking at
Alert
Feedback
No dependencies
The Markdown callout, reachable from JSX - application news in the same box the docs already use.
Preview: A note, a tip and a caution in their tints
Avatar
Media
No dependencies
A person at glyph size: the image if it loads, initials on a toned fill if it does not.
Preview: A photo and two initials, side by side
Badge
Text
No dependencies
A word wearing a fill, in the site's own tone pairs - a badge invents no colour of its own.
Preview: Words on pastel fills, one per tone
Button
Actions
No dependencies
The pill and the ghost - one action and its alternative, with no third variant on purpose.
Preview: A filled pill beside a ghost outline
Checkbox
Forms
No dependencies
A native checkbox with its words attached, painted by accent-color rather than redrawn.
Preview: A checked box in the accent
Clock
Rendering
No dependencies
The reader's own day and time, in the reader's own zone, without asking anybody for a location.
Preview: A weekday and a local time, ticking
Code Block
Rendering
@tanstack/highlight
A highlighted code slab with the CLI's colours, a lit top edge, and a copy button that confirms in place.
Preview: Highlighted code with a copy button