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.jsonAlert
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
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
Copy Button
Rendering
No dependencies
A glass chip that writes to the clipboard and confirms in the button itself, then hands back.
Preview: Copy, with the confirmation in the button
Credit
Attribution
No dependencies
A dependency, credited, with its author required rather than optional.
Preview: A dependency listed with its author
Data Table
Data
@tanstack/react-table
The same table with TanStack Table under it: sorting, filtering and paging that somebody else has already tested.
Preview: A sortable, filtered table with its page controls under it
Empty
Loading
No dependencies
Nothing, said properly: what is missing, why that is fine, and what to do next - in that order, quietly.
Preview: A dashed frame with an icon and a way out
Field
Forms
No dependencies
A labelled control with one line under it - the error is announced by being pointed at, not by being red.
Preview: Label, control, hint - and the error state
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
Icon
Primitives
No dependencies
The glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.
Preview: The glyphs, in a row, at text size
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
Markdown View
Rendering
@tanstack/markdown
Renders Markdown with callouts, CSS-only tabs, custom blocks and highlighted code.
Preview: Markdown with callouts, tabs and highlighted code