Components

The third of LoamUI's three primitives, built on the two beneath it. Tokens supply the colour and scale; element styles supply the native baseline. Most of a component's look is decided before its own stylesheet exists, which is why the set stays small: components add the anatomy a bare element cannot, and nothing more.

When to reach for one

Reach for a component when a native element needs structure it does not have on its own: a field that wires a label, description and error together; a dialog that traps focus; a menu with roving keyboard focus. For everything else, the two primitives beneath already carry the styling, so you compose the rest yourself rather than installing a component for it.

What makes a LoamUI component

• Context decides, props don't. No size, variant or colour props. A region declares its intent and the components inside adapt; the container's width decides how they size.
• Compose, don't configure. Compound components expose their parts, element substitution goes through the render prop, and icons and loaders are detected children, not slot props.
• Accessible by construction. Real semantics, keyboard support and a shared focus-visible ring come from the platform, then the component wires the ARIA the platform leaves to you.

Finding your way

The components are grouped by job in the sidebar: Inputs, Data display, Feedback, Disclosures and Navigation. Every page shows live examples, the real CSS that ships, and guidance on when to use it and when not.