MantleUI
A modern React component library showcasing frontend architecture, design patterns, and technical craftsmanship. Built with TypeScript, CSS custom properties, and zero runtime overhead.
Try It Live
Pick an accent color and interact with real components. Everything you see below is built with MantleUI.
Buttons & Badges
Toggle & Switch
Slider & Progress
Tabs
Live component preview with hot reload.
Avatars & Toasts
Accordion
6 Built-in Accent Colors + Custom Hex Support
Design Patterns
Built to demonstrate production-grade React patterns used in real component libraries.
Compound Components
Flexible multi-part components like Tabs, Accordion, and Card that share implicit state.
<Tabs> + <Tabs.List> + <Tabs.Trigger> + <Tabs.Content>Headless Hooks
Logic-only hooks like usePopover() and useControllable() for full rendering control.
const { isOpen, triggerProps, contentProps } = usePopover()Polymorphic Components
Type-safe "as" prop lets any component render as a different HTML element.
<Button as="a" href="/about">Link Button</Button>Controlled & Uncontrolled
Every stateful component works as both controlled and uncontrolled out of the box.
<Toggle> or <Toggle pressed={value} onPressedChange={set}>Built Right
Every component follows strict engineering standards.
Accessible
WAI-ARIA, keyboard navigation, focus management, screen reader support
Type Safe
Strict TypeScript, no 'any' escapes, full prop inference
Themeable
CSS custom properties, 6 accent colors + custom hex, dark mode
Zero Runtime
Plain CSS with mantle- prefix, no CSS-in-JS overhead
Dark Mode
System preference detection, localStorage persistence, SSR-safe
Responsive
Mobile-first design, responsive props tables, touch-friendly
All Components
73 components organized across 8 categories.