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.jsonDevice
Scenes
No dependencies
A phone, a tablet or a laptop in CSS 3D, chosen by the stylesheet rather than by JavaScript, whose screen is a real scroll container with real controls in it.
Preview: The same screen drawn as all three machines
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
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
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
Doc Aside
Navigation
@tanstack/markdown
An on-page table of contents: a sticky rail on desktop, a collapsed row on mobile. Collapse is CSS, not state.
Preview: A contents list tracking the heading you are under
Doc Nav
Navigation
No dependencies
The left rail of a documentation page: the sections of a library, the elements in each, and the one that is open. A sticky column on a wide screen, a collapsed row below it.
Preview: A grouped list of elements with the open one marked
Hero
Page furniture
No dependencies
The head of a documentation page: trail, element name, version, measured facts, actions and a responsive shot. Folds to one column by the room it has, not by the size of the window.
Preview: A page head with its name, its facts and a picture of itself
Showcase
Presentation
No dependencies
A component in a real iframe at every width it has to survive, side by side, with its source and install commands.
Preview: One component, four real viewports, side by side