Explore the core component library and supporting guides built around semantic web standards
Button, Card, Modal, Table, Video Player, AI Chat, and more
Colors, Spacing, Typography, Shadows, Animations
Fade, Slide, Scale, Bounce, GPU-accelerated
Jump to popular components or learning paths
Complete catalog organized by category
Building interactive UI components out of <div> tags requires massive JavaScript overhead: manual focus trapping, ESC key listeners, ARIA role juggling, and scroll lock management. Axiom01 uses native HTML5 primitives — <dialog>, <details>, <summary> — reducing your Behavioral Debt to absolute zero.
Axiom01 modals use <dialog>. Accordions use <details>. The browser handles focus, keyboard navigation, and accessibility — for free.
<!-- Modal: native dialog, zero JS overhead -->
<dialog class="modal">
<article class="card">
<header><h3>Confirm Action</h3></header>
<p>Are you sure?</p>
<footer>
<button class="primary">Confirm</button>
</footer>
</article>
</dialog>Native <details> is accessible, keyboard-navigable, and requires no JavaScript. One semantic element. Complete behavior.
<details class="accordion">
<summary>Toggle this section</summary>
<p>Content revealed on click — no JS required.</p>
</details>To rebuild a native modal, you must manually trap focus, lock scroll, and bind ESC keys. This is behavioral debt that accumulates silently across every interactive component in your application.
// Utility-first modal — 40+ lines of behavioral glue
function openModal(el) {
el.style.display = 'flex';
document.body.style.overflow = 'hidden';
const focusable = el.querySelectorAll('button, [href], input');
focusable[0].focus();
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal(el);
if (e.key === 'Tab') trapFocus(e, focusable);
});
}
// ... dozens more lines for closeModal, trapFocus, etc.