Obi UI
A React component library built around one idea: you should own your UI code. Install only what you need, read it, change it, make it yours. No black-box packages. No fighting the library.
Why Obi UI?
Most component libraries ship as npm packages. You import a component, it works, then one day you need it to behave slightly differently and you hit a wall — the library doesn't expose the prop you need, the styling system fights your design tokens, or an upgrade breaks something three layers deep.
Obi UI takes the opposite approach: run a single CLI command and the component's source code is copied directly into your project. You own it. You can read every line, edit any behaviour, and never worry about a breaking upgrade. Components are not a dependency — they're just code in your repo.
The trade-off is intentional: you take on the source, we take on making sure that source is clean, accessible, and well-documented so it's a pleasure to own.
What's inside
Accessible by default
Every component ships with correct ARIA roles, keyboard navigation, visible focus indicators, and WCAG AA contrast ratios. Overlay components (modals, menus, popovers) implement full focus management: trap on open, return on close, Escape to dismiss. Accessibility is not an afterthought — it's the baseline.
Token-based theming
Every color, radius, and timing value in every component resolves through a CSS custom property. Swap the tokens, change the look — no component modifications required. Dark mode and the three sample themes (Zinc, Ocean, Warm) all work this way. Bring your own brand by overriding the same tokens.
Subtle motion
Animations are purposeful and restrained. Overlay components fade and scale at 200ms. Interactive elements respond at 150ms. Every animation checks prefers-reduced-motion — users who prefer less motion get none. Motion is a signal, not decoration.
AI-native development
The built-in MCP server exposes every component spec, token definition, and design pattern as a live resource. Connect it to Claude or any MCP-compatible AI and it will use the actual docs — not hallucinated APIs — when helping you build.
Components
Components across ten categories, with more on the way. The library covers the primitives every app needs: inputs, buttons, layout, disclosure, feedback, navigation, and data display. Charts wrap Recharts with a consistent token-based API and ship separately so you don't pull in Recharts unless you need it.
Quick start
Install a component with a single command. The CLI copies the source into components/ui/, installs any npm dependencies, and transitively resolves any other Obi UI components it depends on.
See the installation guide for full setup instructions.