01 / Show & hide
Disclosure & accordion
A reusable native disclosure component with expand-all controls and a live count.
<brio-disclosure> Explore the part & source → A little HTML. A useful interaction.
Good parts.
Entirely yours.
Accessible building blocks. Copy, customize, make them yours.
Copy a component. Register it on your app. Scoped CSS inside the template, independent state per instance. No dependencies, just Brio.
<brio-tabs> Explore the part & source → 03 / Focus & decide
Dialog
A controlled native modal with slots for custom content, forms, and actions.
<brio-dialog> Explore the part & source → 04 / Take action
Action menu
A compact menu for commands, with arrow navigation, typeahead, dismissal, and focus restoration.
<brio-menu> Explore the part & source → Foundations, not a black box.
Each component has a live demo on its own page, plus its source, keyboard contract, requirements, and limits. Review accessibility in your application after changing markup, styles, or behavior.
All four use Brio core only. Copy the template with its native CSS @scope
and its component definition, then register on your existing app before mounting.
Code is available under Brio's MIT license.
Adding Brio to an existing stack? Read the integration guides.