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.jsonDropdown Menu
Overlays
No dependencies
A menu hung off a button: the popover API for the layer, arrow keys for the list, and light-dismiss for free.
Preview: A button with an open menu of four actions beneath it
Folder Shelf
Containers
No dependencies
A desktop of folders that open into draggable windows, several at once, remembered between visits.
Preview: Folders on a desk with a window open over them
Grid
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
Workbench
Containers
No dependencies
The frame around a tool rather than a page: title strip, toolbar, rail, a body that scrolls on its own, and a status line.
Preview: A bordered panel with a title strip above and a status line below
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
Bar Chart
Data
@tanstack/charts@tanstack/react-chartsd3-scale
One measure across a handful of categories, drawn by TanStack Charts and coloured from the site's own tones.
Preview: Horizontal bars, one colour per category, on a token palette