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.jsonAccordion
Disclosure
No dependencies
details, stacked - every behaviour ships in the element, and items open independently on purpose.
Preview: Three rows, one open, chevrons turning
Archive
Containers
zod
A filterable grid with categories, subcategories and tags. Renders its own links through a callback so the router stays yours.
Preview: A grid of cards above a row of category filters
Aspect Ratio
Page structure
No dependencies
A box that keeps its shape and fills whatever is put in it. CSS aspect-ratio, as a prop.
Preview: A 16:9 frame holding an image to its crop
Card
Containers
No dependencies
Title, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.
Preview: Two cards: one with meta, one as a link
Collapsible
Disclosure
No dependencies
One details, dressed - a sentence that opens, for prose rather than lists.
Preview: A line that opens into a paragraph
Context Menu
Overlays
react-dom
One menu, reachable by right-click, by long press, and by a button. Escape and arrow keys included.
Preview: A menu opening at the pointer with four actions in it
Desk Window
Overlays
No dependencies
A window you can drag, close and stack. Position is written to the element during a drag and to state only on release.
Preview: Two windows on a desk, one dragged in front of the other
Device
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
Dialog
Overlays
No dependencies
A native dialog driven by props: top layer, focus trap and Escape from the element, click-outside from here.
Preview: A titled box over a dimmed page
Dock
Page structure
No dependencies
A launcher, what is open, and a corner. Search opens upward and results are the consumer's to compute.
Preview: A dock with a launcher open above 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