Component Browser

Browse component examples in a single semantic shell. Use search and category filters to narrow the component list, then open any example in context.

What it demonstrates

The Component Browser combines existing Axiom01 patterns — tabs, cards, inputs, iframe previews, and token-driven spacing — into one navigable docs experience. It is a docs utility rather than a framework primitive, but it shows how the framework’s existing pieces compose naturally.

  • Search and category filtering for faster discovery
  • Preview-first layout using semantic regions
  • Progressive enhancement through shared page scripts
  • Keyboard and screen-reader friendly controls

Where to use it

Use the main Components Overview when you want the full library index, or link directly to individual component pages when you want the cleanest semantic examples. The browser pattern is best suited to internal sandboxes, design system review tools, or learning environments.

Open Components Overview View Button Docs

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Component Browser component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.

Accessibility

Axiom01 ensures that the Component Browser component meets strict WCAG standards out of the box:

  • Keyboard Navigation - Fully navigable using standard Tab and Arrow key workflows.
  • Screen Reader Support - Requires minimal manual ARIA labeling due to semantic HTML roots.
  • Focus Management - Visible, high-contrast focus indicators without layout shifting.
  • Color Contrast - OKLCH math guarantees perfect WCAG AAA contrast ratios in both light and dark modes.
  • Reduced Motion - Respects system-level prefers-reduced-motion settings for any internal animations.