Introduction

MantleUI is a production-grade React component library with 109 components, built-in dark mode, full TypeScript support, and zero CSS-in-JS runtime.

What is MantleUI?

MantleUI is a comprehensive React component library designed for building modern web applications. It provides 109 components across 13 categories, from everyday form controls and feedback elements to advanced 3D visualizations and motion animations. Every component is built from scratch with clean abstractions, composability, and accessibility as first-class priorities.

The library ships as three tree-shakeable entry points. The core package has zero peer dependencies beyond React. 3D and motion components are separate imports with optional peer dependencies, so they never bloat your bundle if you don't use them.

Features

Three Entry Points

MantleUI is organized into three separate entry points, each with its own JavaScript bundle and CSS file. This keeps your bundle lean — you only pay for what you import.

Design Patterns

MantleUI demonstrates a range of React design patterns used in production component libraries.

Compound Components

Components like Accordion, Tabs, and BentoGrid use the compound component pattern — a parent component shares state with its children via context.

<Accordion>
  <Accordion.Item value="faq-1">
    <Accordion.Trigger>What is MantleUI?</Accordion.Trigger>
    <Accordion.Content>
      A production-grade React component library.
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Controlled & Uncontrolled

Every stateful component works both ways. Use defaultValue for uncontrolled, or value + onChange for controlled.

// Uncontrolled — just works
<Select defaultValue="react" options={options} />

// Controlled — full control
<Select value={value} onValueChange={setValue} options={options} />

Polymorphic Components

The as prop lets you change the rendered element while keeping all component styling and behavior.

// Renders as an <a> tag with full Button styling
<Button as="a" href="/about">I'm a link</Button>

// Renders as a <span>
<Button as="span">I'm a span</Button>

Theming & Colors

Every component accepts a color prop for preset or custom hex colors. For deeper customization, override CSS variables directly.

// Every component accepts a color prop
<Button color="blue">Blue</Button>
<Button color="#e94560">Custom Hex</Button>

// Full CSS variable override
<Button
  style={{
    "--mantle-bg": "#1a1a2e",
    "--mantle-border": "#e94560",
    "--mantle-text": "#ffffff",
  }}
>
  Fully Custom
</Button>

Tech Stack

Next Steps

Ready to start building?