elements
Manual Style Components

Components

elements man style/components Read as markdown

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. There is no JavaScript in this package. No behavior is attached to any class. A .tab doesn't switch panels; a copy button doesn't copy. The classes give you the finished look and the state hooks (is-active, is-copied, is-loading); you supply the behavior that toggles them.

Interactive widgets that are fundamentally about JavaScript (dialogs, dropdowns, toasts, menus, command palettes, comboboxes, calendars, data tables, sheets, and the like) are not part of @elements/style. They belong to a separate @elements/ui package that is not shipped in v1. Don't look for a .dialog or .dropdown here; they aren't in this package.

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:

<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).

Topics

style/components/button A bare button is a finished secondary button; is- modifiers change intent and size.style/components/form Self-styling inputs, the .field wrapper, and form.is-grid layout.style/components/card A bordered surface with optional head, body, and foot regions.style/components/callout A left-bordered notice block for tips, warnings, and status.style/components/pill A small rounded label for tags, statuses, and counts.style/components/tabs Underline-style tabs.style/components/terminal A dark command bar for CLI commands, plus inline CLI references.style/components/native Styling for progress, meter, and details/summary.