15 production-ready components.

Copy-paste, no install. Each component is a single Micra.define() blueprint with live preview, full HTML+JS source, and integration notes — no external dependencies, no build step.

  • 15 components
  • 0 external deps
  • ~5 kB runtime
  • Copy-paste ready

Overlays

Modal Centered dialog with backdrop click, Escape close, and body scroll lock. Dropdown Menu toggle with outside-click close, keyboard navigation, selected-state callback. Tooltip Hover / focus tooltip with delay, four placements, escapes on blur. Toast Bus-driven notification stack — emit from anywhere, auto dismiss, severity styling. Command palette ⌘K launcher with fuzzy filter, keyboard navigation, and bus-published commands.

Navigation

Tabs Roving-tabindex tabs with arrow-key navigation and panel swap. Accordion Multi/single-expand sections with chevron rotation and per-item state. Breadcrumb Trail navigation that collapses to an ellipsis when the path runs long.

Forms

Combobox Filterable select — type to search, click to pick, keyboard friendly. Toggle Accessible switch with labels, disabled state, and a toggled-payload event. Tag input Token field — add on Enter / comma, backspace to remove last, paste split. Date picker Month calendar with prev/next nav, click-to-pick, and a highlighted today. Slider Native range with two-way binding, derived fill bar, props from data-* attributes.

Data

Table Sortable columns, pagination, row selection, and a real empty state.