Introduction

Mica is a front-end library built from custom element tags, native HTML elements, and CSS. Behavior comes from the browser, not from a runtime: <dialog> traps focus, popover handles menus, <m-vstack> is a styling hook that needs no registration. View source on any page here — there is nothing but static HTML and CSS.

Install

<link rel="stylesheet" href="mica.css" />

Using React? Start with the React components: the same markup, with typed props.

Use

<m-vstack gap="lg">
  <h1>Hello</h1>
  <button data-variant="primary">Submit</button>
</m-vstack>

Progressive by design

Mica is a progressive component library — progressive as in progressive enhancement. Every component starts from markup that works, and each layer added enhances it; remove a layer and things get plainer, never broken. Components state what they need: CSS-only — custom tags whose entire behavior is a stylesheet (layout). Native behavior — styled native elements; the browser ships the interactivity (forms, dialog, tables). JS-enhanced — tiny opt-in modules for the few patterns where accessibility genuinely requires script; each one enhances working markup, never renders it.

Server-rendering frameworks hydrate markup after it arrives, sometimes in parts. A module that has already loaded must not edit markup a framework is still hydrating, so the modules that change their markup (tabs, combobox, command palette, menu, header, sidebar) skip a host marked data-m-pending and enhance it once the attribute is removed. Plain HTML never sets it. The React layer sets and removes it for you.