# Adam Jurek

Small packages, built carefully. A TanStack Start site and the component library it is made of.

> Every component here is installable on its own, with either the TanStack CLI or shadcn. Component pages carry a live preview; the source of truth for each one is its package under packages/.

## Components

Installable with the TanStack CLI or shadcn. Each page has a live preview.

- [Boot Loader](https://adamjurek.com/components/boot-loader): A count to a hundred that stalls at ninety until the thing it is covering has actually arrived.
- [Reveal](https://adamjurek.com/components/reveal): Fades and rises its children the first time they reach the viewport. Never un-reveals.
- [Scroll Spin](https://adamjurek.com/components/scroll-spin): Rotates its children with the page scroll.
- [Smooth Scroll](https://adamjurek.com/components/smooth-scroll): Mounts Lenis for the page and renders nothing. Respects reduced motion.
- [Typed Mark](https://adamjurek.com/components/typed-mark): Types a word out one character at a time, cycling the syntax palette. No JavaScript, no state, and it runs with scripting off.
- [useScrollProgress](https://adamjurek.com/components/use-scroll-progress): How far one element has travelled up the viewport, 0 to 1, once per frame. Gated by an observer so an off-screen element costs nothing.
- [useScrollTurn](https://adamjurek.com/components/use-scroll-turn): Scroll position as a rotation, delivered once per frame, written straight to wherever it goes.
- [Accordion](https://adamjurek.com/components/accordion): details, stacked - every behaviour ships in the element, and items open independently on purpose.
- [Archive](https://adamjurek.com/components/archive): A filterable grid with categories, subcategories and tags, that leaves routing to you.
- [Aspect Ratio](https://adamjurek.com/components/aspect-ratio): A box that keeps its shape and fills whatever is put in it. CSS aspect-ratio, as a prop.
- [Card](https://adamjurek.com/components/card): Title, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.
- [Collapsible](https://adamjurek.com/components/collapsible): One details, dressed - a sentence that opens, for prose rather than lists.
- [Context Menu](https://adamjurek.com/components/context-menu): One menu, reachable by right-click, by long press, and by a button that is always there.
- [Desk Window](https://adamjurek.com/components/desk-window): A window you can drag, resize, close and stack, without re-rendering its contents every frame.
- [Device](https://adamjurek.com/components/device): A phone, a tablet or a laptop in CSS 3D, chosen by the stylesheet rather than by JavaScript, with a real screen in it.
- [Dialog](https://adamjurek.com/components/dialog): A native dialog driven by props: top layer, focus trap and Escape from the element, click-outside from here.
- [Dock](https://adamjurek.com/components/dock): A launcher, what is open, and a corner. Search opens in the middle of the screen.
- [Folder Shelf](https://adamjurek.com/components/folder-shelf): A desktop of folders that open into draggable windows, several at once, remembered between visits.
- [Grid](https://adamjurek.com/components/grid): A responsive grid with no breakpoints in it. One number decides the column count at every width.
- [Item](https://adamjurek.com/components/item): One row of a list: tile, title, description, meta - the nav panel's anatomy, extracted for reuse.
- [Nav Bar](https://adamjurek.com/components/nav-bar): A site header whose panels expand, built on <details> so it works before hydration.
- [Scroll Area](https://adamjurek.com/components/scroll-area): The named inner scroll: thin bar, and the smooth scroller handed back - the pair everyone forgets separately.
- [Section](https://adamjurek.com/components/section): Kicker, heading and body, revealing top-down with an 80ms offset.
- [Separator](https://adamjurek.com/components/separator): A rule with two directions and an accessibility decision: announced when it separates content, silent when it is furniture.
- [Sheet](https://adamjurek.com/components/sheet): The dialog docked to an edge, for content tall enough that centring it would mean scrolling a floating box.
- [Spacer](https://adamjurek.com/components/spacer): Vertical space on the scale, optionally with a rule and a label. Built for Markdown.
- [Theme Toggle](https://adamjurek.com/components/theme-toggle): A segmented control that reports which option was pressed and knows nothing about themes.
- [useDeskState](https://adamjurek.com/components/use-desk-state): Which windows are open, where they sit and what has been put away, remembered without breaking a server render.
- [useDeviceKind](https://adamjurek.com/components/use-device-kind): Which machine the stylesheet is currently drawing, as a value. Null until mounted, on purpose.
- [Alert](https://adamjurek.com/components/alert): The Markdown callout, reachable from JSX - application news in the same box the docs already use.
- [Avatar](https://adamjurek.com/components/avatar): A person at glyph size: the image if it loads, initials on a toned fill if it does not.
- [Badge](https://adamjurek.com/components/badge): A word wearing a fill, in the site's own tone pairs - a badge invents no colour of its own.
- [Button](https://adamjurek.com/components/button): The pill and the ghost - one action and its alternative, with no third variant on purpose.
- [Checkbox](https://adamjurek.com/components/checkbox): A native checkbox with its words attached, painted by accent-color rather than redrawn.
- [Clock](https://adamjurek.com/components/clock): The reader's own day and time, in the reader's own zone, without asking anybody for a location.
- [Code Block](https://adamjurek.com/components/code-block): A highlighted code slab in the CLI's colours, with a copy button that confirms in place.
- [Copy Button](https://adamjurek.com/components/copy-button): A glass chip that writes to the clipboard and confirms in the button itself.
- [Credit](https://adamjurek.com/components/credit): A dependency, credited, with its author required rather than optional.
- [Empty](https://adamjurek.com/components/empty): Nothing, said properly: what is missing, why that is fine, and what to do next - in that order, quietly.
- [Field](https://adamjurek.com/components/field): A labelled control with one line under it - the error is announced by being pointed at, not by being red.
- [Frontmatter](https://adamjurek.com/components/frontmatter): A small frontmatter reader for `key: value` and inline lists. Not YAML, deliberately.
- [Input](https://adamjurek.com/components/input): A text input, and only the drawing of one - state and labels belong to the form and to Field.
- [Kbd](https://adamjurek.com/components/kbd): A key, drawn as one. Semantically <kbd>, visually the chip the command palette already wears.
- [Markdown View](https://adamjurek.com/components/markdown-view): Renders Markdown with callouts, CSS-only tabs, custom blocks and highlighted code.
- [Native Select](https://adamjurek.com/components/native-select): The platform's own select in the site's clothes - the phone wheel and the OS menu, kept.
- [Progress](https://adamjurek.com/components/progress): The native progress element, restyled - omit value and the indeterminate state is real.
- [Questions](https://adamjurek.com/components/questions): The questions a page expects to be asked, written beside the prose that provokes them and answerable in place.
- [Radio Group](https://adamjurek.com/components/radio-group): Radios in a fieldset - the one grouping screen readers announce without help.
- [Reference](https://adamjurek.com/components/reference): An inline mention that carries a hover card with the target's own summary.
- [Skeleton](https://adamjurek.com/components/skeleton): The wait, drawn as the thing being waited for: a line, a block or a circle, shimmering unless motion is reduced.
- [Slider](https://adamjurek.com/components/slider): A native range input with its label - keyboard steps and form value ship in the element.
- [Spinner](https://adamjurek.com/components/spinner): One ring, one border, one turn - with a visually hidden label, because a spinner with nothing to announce is just an animation.
- [Switch](https://adamjurek.com/components/switch): A checkbox that admits it: a real input with role=switch, and a track :checked drives.
- [Table](https://adamjurek.com/components/table): A table that is a table: declared columns, right-aligned numbers, sideways scroll in its own frame.
- [Textarea](https://adamjurek.com/components/textarea): A textarea in the same clothes as Input, growing with its content where the browser allows.
- [Toast](https://adamjurek.com/components/toast): Strings, four seconds, bottom corner, announced politely - one provider and one hook, nothing else.
- [Toggle](https://adamjurek.com/components/toggle): A button that stays down, and the single-select group of them - aria-pressed is the whole contract.
- [Tooltip](https://adamjurek.com/components/tooltip): One line on hover and focus, in the markup rather than in title= - and never carrying controls.
- [Typography](https://adamjurek.com/components/typography): The type scale as components: Heading with outline and size separated, the Label eyebrow, the Lead. One decision, made once.
- [Video Player](https://adamjurek.com/components/video-player): A video held behind a picture of itself. The player is a child, so it mounts on play and unmounts on stop.
- [Breadcrumb](https://adamjurek.com/components/breadcrumb): The trail, told twice from one list: a visible nav with correct ARIA, and the schema.org BreadcrumbList rendered from the same array.
- [Command Palette](https://adamjurek.com/components/command-palette): Search over everything the host can name, in a native dialog: substring filter, arrow keys, and the host keeps the router.
- [Doc Aside](https://adamjurek.com/components/doc-aside): An on-page table of contents that is a rail on desktop and a collapsed row on mobile.
- [Doc Nav](https://adamjurek.com/components/doc-nav): The left rail of a documentation page - the sections of a library, the elements in each, and the one that is open.
- [Hero](https://adamjurek.com/components/hero): The head of a documentation page - trail, element name, version, measured facts, actions and a picture of itself.
- [Pagination](https://adamjurek.com/components/pagination): Pages as links with first and last always reachable, and nothing that breaks middle-click.
- [Showcase](https://adamjurek.com/components/showcase): A component at every width it has to survive, with its source, install commands, and a live StackBlitz editor.
- [Assistant](https://adamjurek.com/components/assistant): A terminal that answers questions about this site, streaming Markdown, with its history in the browser and nowhere else.
- [Model Mark](https://adamjurek.com/components/model-mark): A model at icon size - turning, uninteractive, and layered over a real icon that never gets removed.
- [Motion and depth](https://adamjurek.com/components/motion): Every transition, animation and perspective in the stylesheet, what each is for, and where it is used.
- [Product Viewer](https://adamjurek.com/components/product-viewer): A 3D product viewer for TanStack applications, documented with itself.

## Packages

Everything published from this monorepo.

- [@sushindustries/assistant](https://adamjurek.com/packages/assistant): A chat panel that streams Markdown, told which machine it is running on. TanStack AI on the wire, Groq behind it, and its whole personality in a Markdown file.
- [@sushindustries/atoms](https://adamjurek.com/packages/atoms): The design tokens and the atomic utilities built on them. One stylesheet, no build step, no framework.
- [@sushindustries/db](https://adamjurek.com/packages/db): The schema and the client. Drizzle over Postgres, with the connection kept server-side by construction.
- [@sushindustries/llms](https://adamjurek.com/packages/llms): Generate llms.txt, llms-full.txt, robots.txt and sitemap.xml from one description of a site. Framework-agnostic strings in, strings out.
- [@sushindustries/product-viewer](https://adamjurek.com/packages/product-viewer): Runtime material swapping and geometric zone tinting for a single GLB product. Framework-free.
- [@sushindustries/react-product-viewer](https://adamjurek.com/packages/react-product-viewer): A React Three Fiber viewer for a single GLB product: orbit, contact shadow, runtime material variants, geometric zone tinting, and a PNG snapshot.
- [@sushindustries/ui](https://adamjurek.com/packages/ui): The components this site is made of. Every one of them is installable on its own - nothing here is site-specific.

## Writing

Notes on how this is built.

- [How to add something here](https://adamjurek.com/posts/adding-things): The four things you can add to this repo, and the exact steps for each.

## Pages

Standalone pages: the layout examples, the Markdown showcase, and the site's own reference material.

- [API](https://adamjurek.com/p/api): The read API. Versioned, discoverable from its root, and rendered from the same data as the pages.
- [Blog Layout](https://adamjurek.com/p/blog-layout): A blog front page built entirely from Markdown blocks - copy this file, replace the words.
- [Contact](https://adamjurek.com/p/contact): How to reach me, what each channel is good for, and roughly how long each one takes.
- [Documentation Layout](https://adamjurek.com/p/documentation-layout): A documentation landing page from Markdown blocks - sections, cards, a live example, install tabs.
- [Getting started](https://adamjurek.com/p/getting-started): Install one component, understand what arrived, and know what happens the next time it changes.
- [Markdown](https://adamjurek.com/p/markdown): Every syntax the renderer speaks, on one page - and the atomic CSS that styles it, visible in action.
- [Elsewhere](https://adamjurek.com/p/socials): Every account that is actually mine, what gets posted where, and which ones are not me.

## Assistant skills

What the assistant on the desktop at / can do. Each is a tool it calls on your behalf; the source of each declaration is packages/assistant/skills/.

- [find_component](https://adamjurek.com/): Search the component library. Use this whenever the reader asks what exists, what something is called, or what to use for a job. Takes query (string), limit (number, optional).
- [list_packages](https://adamjurek.com/): List the published packages in this monorepo, with what each one is for. Use this for questions about the repo's shape rather than its components. Takes detail (boolean, optional).
- [read_doc](https://adamjurek.com/): Read a component's documentation page in full. Call this before explaining how anything works, rather than summarising from memory. Takes slug (string).
- [site_stats](https://adamjurek.com/): How many times a package's page has been read. Use this only when the reader asks about traffic or popularity. Takes slug (string, optional).

## Full text

- [Everything, inlined](https://adamjurek.com/llms-full.txt): Every page above with its text, in one file