Introduction

Mako UI is Rubix's React component library — 55 accessible, composable components shipped as the mako-ui npm package.

It's a finished design system, ready to use. You install one dependency, import the components you need, and keep full control of how they look through design tokens and className.

How it works

Install once, import anywhere. Mako UI is a single, versioned package on the public npm registry — no private registry to configure, no auth token:

• One dependency for everything. Components, tokens, icons and fonts ship together, so there are no versions to keep in step with each other.
• Updates arrive like any dependency. Bump the version, read the changelog, done. Every app on the same version renders the same UI.
• No abstraction tax. Components are plain React. Adjust them with CSS variables, className and the data-slot selectors — no wrappers, no build step, no configuration file.
• Readable source. The published code is not bundled or minified — one module per component, matching the source you see in the docs, with the types stripped and JSX compiled. When you need to know exactly what a component does, you can read it in node_modules.

What's in the package

The package also ships version-matched docs for coding agents, so they get the component APIs right without guessing.

Designed for production

Every component handles the hard parts for you — accessibility, keyboard navigation, focus management — and adds:

• Production-tested patterns taken from real Rubix applications
• Extended component variants for common product needs
• Thoughtful defaults optimized for dense, information-heavy UIs
• One consistent design system across every component

Every component sets a data-slot attribute, so you can target internals from the outside without patching source or fighting specificity.

Built for humans and AI

Components are written to be clear, predictable, and easy for a language model to reason about. Three things back that up:

• docs bundled in the package covering all 55 components and the styling conventions, matched to your installed version
• an llms.txt map of the documentation
• a Copy Markdown button on every page — or append .md to any docs URL to get the raw source

Requirements

React 19 and Tailwind CSS v4. Next.js 16 is optional — it's only needed for the mako-ui/fonts entry point; every other export is framework-agnostic.

Head to Get Started to install it.

Feedback

Found a bug, need a component, spotted something wrong in these docs? Use the feedback button on any page — it captures the page context automatically, so you only have to describe the problem.