Components

The component classes are CSS-only families in @layer components. Each is a bare noun (.card, .callout, .pill, .tab, .terminal), its parts carry the family prefix (.card-head, .pill-dot, .tab-list), and its variants are is- modifiers (is-primary, is-active, is-error). See the naming rule (elements man style).

CSS-only scope

Everything here is styling applied to markup you write. The classes give you the finished look and the state hooks (is-active, is-copied, is-loading), and the event handlers in your template toggle them. The package carries no JavaScript so that behavior stays in the template, next to the state it reads. A tab bar is .tab buttons whose onclick sets the active tab, with e:if on each panel. A copy button is an onclick that writes to the clipboard and adds is-copied.

Bare elements come first

Before the component classes, remember that bare <button>, <input>, <textarea>, <select>, checkbox and radio style themselves at zero specificity (via :where() and the layer order), so any class you add wins with no !important. To render a non-button element as a button, use the .button coercion class:

Example
<button>Default chrome</button>
<a class="button is-primary" href="/install">Install</a>

See base for the bare-element principle in full.

The families

• button: <button> / .button, intents, sizes, states, button groups, icon-only.
• form: bare inputs, textarea, select, checkbox, radio, the .field wrapper, and the grid form.
• card: .card with head/body/foot.
• callout: .callout with status and accent intents.
• pill: .pill with intents and an optional status dot.
• tabs: .tabs / .tab-list / .tab / .tab-panel (you supply the toggle).
• native: styled progress, meter, and details > summary.
• terminal: the dark CLI bar, token rows, and inline CLI references (you supply the copy behavior).