Components

The components shipped in brio's core bundle (brio.css and brio.js). Each is built around the platform's native primitive (<dialog>, <details>, <nav>, <input>, and so on) with brio adding theming, slot vocabulary, and -- where needed -- light JS orchestration on top of authored DOM.

Components handle naming, theming, and state. Composition primitives (.stack, .cluster, .media, .grid, and friends) handle layout. Most components pair with one or more compositions to arrange their content -- alert + media, drawer + stack, card + grid -- rather than reinventing layout internally.

Browse the full list in the sidebar. Each component page follows the same rhythm: intent, basic usage, variants and options, class reference, customization tokens, and accessibility notes.