Manti UI is a React component library built on framework-agnostic tokens, CSS, and behavior machines. It is named after mantı: one simple form that adapts to many contents and contexts.
The design language is calm and compact: neutral translucent surfaces, semantic color variants, generous radii, and motion that respects user preferences.
npm install @manti-ui/react @manti-ui/stylesImport the stylesheet once, then use any component:
import '@manti-ui/styles/index.css';
import { Button } from '@manti-ui/react';
export function App() {
return <Button variant="primary">Save</Button>;
}Set theme, motion, or radius on <html> or any container:
<html data-theme="dark" data-motion="default" data-radius="default">
…
</html>| Package | Purpose |
|---|---|
@manti-ui/react |
React components and hooks |
@manti-ui/styles |
Tokens, base styles, and component CSS |
@manti-ui/tokens |
Typed design-token contract |
@manti-ui/folds |
Framework-agnostic behavior and Zag adapters |
React is the only renderer today. The lower layers are framework-agnostic so future renderers can reuse the same behavior, anatomy, and styles.
Requires Node >=22.12.0, pnpm 10, and a workspace install:
pnpm install
pnpm devUseful checks:
pnpm lint
pnpm typecheck
pnpm verifySee Architecture before changing package boundaries and Styling before changing tokens or component CSS.