Structure

Behaviour and appearance are separated on purpose: primitives know how something works, components know how it looks.

Directories

src

bash

components/primitives   behaviour only, no styling
components/ui           the components themselves
lib/styles.ts           the global style contract
lib/date.ts             calendar maths, no date library
index.css               tokens, and the CSS classes cannot reach

Primitives

A primitive owns the part that is easy to get subtly wrong and hard to notice: focus delegation, placement, dismissal, roving focus.

slot

Merges props onto a child element — the engine behind asChild.

popper

Fixed-position placement with a flip chain, so a layer is never clipped by a scrolling ancestor.

field

A box around an input that forwards clicks on its padding to the control.

dialog

Drives the native <dialog> element, for a focus trap the platform provides.

dismissable

Escape and outside-press, on pointerdown rather than click.

tabs / radio-group / collapsible

Selection state and the keyboard patterns that go with it.

What belongs where

If it can be described without mentioning a colour or a pixel, it is a primitive. If it cannot exist without one, it is a component.