Components that work together
From buttons and inputs to dialogs and data tables. Consistent APIs and shared tokens across every package.
Open sourceExplore the blocks collection
A considered foundation for your next React app.
Accessible components. Flexible themes. Clean, typed APIs. Build your interface with Ninna UI and make it your own.
- React 19
- Tailwind CSS v4
- TypeScript
- MIT licensed
components / project-settingsLive preview
Built with Field, Input, Switch, Badge, and Button.
- Accessible components
- 69
- Built-in theme presets
- 5
- Runtime theming overhead
- 0
- Your styles, your control
- CSS-first
Production-ready UI blocks
Start with a complete pattern. Copy the source, adapt the details, and make it yours.
The foundation
Good defaults. Room to build.
The essentials of a reliable interface, designed to fit your workflow.
Tailwind CSS v4 native
Style with the utilities you already use. CSS-first configuration, with no tailwind.config.ts to maintain.
Accessibility built in
Radix-powered interactions, keyboard navigation, and focus management give you a dependable starting point.
Themes without the runtime
Five presets, light and dark modes, and semantic color tokens. Configure your design system in CSS.
Install what you need
Modular, tree-shakeable packages with TypeScript support. Add components as your application grows.
Make every detail yours
Use className and the data-slot API to adjust components precisely, without maintaining a fork.
A foundation for the way you work.
Whether you're shipping a SaaS MVP or unifying a design system across dozens of products, Ninna UI adapts to your workflow.
SaaS Teams
Ship product, not a design system.
Stop reinventing forms, tables, and modals. Ninna UI gives your team a battle-tested foundation so you can focus on the features that differentiate your product.
- DataTable with sorting & filtering
- Complex form layouts out of the box
- Modal, Drawer, DropdownMenu - all accessible
Design System Teams
A foundation that matches your brand.
5 theme presets and a full CSS custom-properties API let you drive every color, radius, and spacing value from a single CSS file - no provider wrappers.
- oklch color palette with auto dark mode
- data-slot CSS API for granular overrides
- Zero JavaScript runtime theming
Indie Hackers
From idea to launch in a weekend.
One CLI command bootstraps a production-ready React app with auth pages, dashboard scaffolding, and your chosen theme. Build faster and keep shipping.
- npx @ninna-ui/cli init - zero config
- Works with Next.js, Vite, Astro, React Router v7
- Copy-paste example blocks
Agencies & Freelancers
Deliver polished UIs on every project.
Reuse the same component vocabulary across every client. Swap themes per project, keep code consistent, and bill for strategy-not boilerplate.
- 12 independently versioned packages
- Install only what each project needs
- WCAG 2.1 AA - accessibility pre-solved
Powered by modern web standards
- Next.js
- Vite
- React Router
- React 19
- TypeScript
- Tailwind CSS v4
Theming
5 theme presets. One CSS import.
Switch your entire design system instantly. No JavaScript providers, no React Context, no re-renders. Try a preset here or in the header to preview it across the whole website.
Theme preview
Interactive Elements
Forms & Toggles
Dark mode
Push Notifications
Semantic Colors
primary
secondary
accent
success
warning
danger
info
neutral
Surfaces & Data
Light to dark cascading scales
75%
Quickstart
A straightforward start.
Install the packages, import a theme, and build with components.
terminal
npx @ninna-ui/cli init my-app
# Or install manually:
pnpm add @ninna-ui/core@latest @ninna-ui/primitives@latest @ninna-ui/forms@latestComponents for the whole interface.
Install only what you need. Every package is strictly typed, independently versioned, and fully tree-shakeable.
- Components
- 69across modular packages
- Packages
- 12install only what you need
- Tests
- 700+covering every component
- Theme presets
- 5pure CSS, zero JS
- WCAG
- AAaccessibility as a foundation
Your next interface starts here.
Install your first component, choose a theme, and start building. Open source and MIT licensed.