Getting Started

Manti UI is an open-source, framework-agnostic design system for React: 53 accessible components whose behavior comes from Zag.js state machines and whose appearance comes entirely from a three-tier design token contract. This page takes you from an empty project to a rendered component in four steps.

Install

npm install @manti-ui/react @manti-ui/styles

@manti-ui/react includes tokens and behavior. @manti-ui/styles is a peer dependency so your app controls when CSS loads.

Import CSS

Import the stylesheet once at the app entry:

import '@manti-ui/styles/index.css';

For Tailwind v4, use the Tailwind guide instead. Existing applications with global resets should also read the integration guide.

Render a component

Set theme preferences

Put preferences on <html> or any container:

<html data-theme="dark" data-motion="default" data-radius="default">
  …
</html>

data-theme: light or dark; omit it to follow the OS.
data-motion: default, none, or full.
data-radius: none, sharp, default, round, or pill.

Frequently asked questions

What is Manti UI?

Manti UI is an open-source, framework-agnostic design system for React. Its 53 components get their keyboard and ARIA behavior from Zag.js state machines, and every visual value resolves from a three-tier design token contract, so the same behavior layer can be rendered by other framework adapters later.

Does Manti UI require Tailwind CSS?

No. Manti UI ships plain CSS built on custom properties and works with no utility framework at all. Tailwind CSS v4 is supported through an optional theme bridge that maps the --manti-* tokens onto Tailwind theme variables, so both draw from one palette.

How is Manti UI different from Radix UI or shadcn/ui?

Radix ships unstyled React primitives and shadcn/ui ships source you copy into your repository. Manti UI ships versioned, styled components whose behavior comes from framework-agnostic Zag.js machines, and whose appearance is owned by a public token contract named --manti-{component}-{property}, so an upgrade keeps your customizations instead of overwriting them.

Is Manti UI accessible?

Every component targets WCAG 2.2 AA. Keyboard interaction and ARIA semantics come from the Zag.js machines rather than being hand-rolled per component, and the color ramps pass an automated contrast gate in both the light and dark themes before a release ships.

Do I need to install Zag.js separately?

No. @manti-ui/react bundles the behavior layer. The only peer dependency you install yourself is @manti-ui/styles, which exists as a separate package so your application decides when the CSS loads.

Can I use Manti UI with Next.js or another React framework?

Yes. Manti UI is a standard React package with no bundler requirements, and its components render on the server. Import '@manti-ui/styles/index.css' in the root layout, and set data-theme on the html element so the theme is correct before first paint.

Last updated 13 September 2026