Question 1

How do I install Ninna UI?

Accepted Answer

Run npx @ninna-ui/cli init my-app to scaffold a new project with all packages pre-installed, or install individual packages with npm: npm install @ninna-ui/core @ninna-ui/primitives @ninna-ui/forms. Then add the CSS imports: @import "tailwindcss"; and @import "@ninna-ui/core/theme/presets/default.css";.

Question 2

Which frameworks does Ninna UI support?

Accepted Answer

Ninna UI supports Vite 7, Next.js 15 (App Router), React Router v7, and Astro. The CLI can scaffold projects for any of these frameworks with Tailwind v4 and all Ninna UI packages pre-configured.

Question 3

Do I need Tailwind CSS v4 to use Ninna UI?

Accepted Answer

Yes. Ninna UI is built for Tailwind CSS v4.1 and uses its CSS-first configuration. There is no tailwind.config.ts — all theming is done through CSS imports and custom properties.

Question 4

What React version is required?

Accepted Answer

Ninna UI requires React 19 or higher. The components use modern React features and are tested against React 19.

Question 5

How does theming work in Ninna UI?

Accepted Answer

Theming is entirely CSS-based. You import a theme preset CSS file (e.g., @ninna-ui/core/theme/presets/default.css) which defines oklch color custom properties. No JavaScript provider, no context, no runtime overhead. Switch themes by changing a data attribute on the html element.

Question 6

How do I enable dark mode?

Accepted Answer

Dark mode is automatic. The theme presets include dark mode via CSS selectors. Add @variant dark (&:is(.dark *)); to your CSS and toggle the .dark class on the html element. No provider or JavaScript state needed.

Question 7

What are the available theme presets?

Accepted Answer

Ninna UI ships 5 theme presets: default (purple/magenta), ocean (blue/cyan), sunset (orange/rose), forest (green/amber), and minimal (monochrome). Each uses oklch perceptual colors for consistent, accessible palettes.

Question 8

Can I create a custom theme?

Accepted Answer

Yes. Copy any preset CSS file and modify the oklch custom property values. All 8 semantic colors (primary, secondary, success, warning, danger, info, accent, neutral) are defined as CSS variables you can override.

Question 9

What is oklch and why does it matter?

Accepted Answer

oklch is a perceptual color space where equal numeric steps produce equal visual changes. This makes generating consistent, accessible color palettes easier than HSL or hex, where lightness is not perceptually uniform.

Question 10

How many components does Ninna UI have?

Accepted Answer

Ninna UI ships 69 accessible components across 8 component packages (primitives, feedback, forms, layout, overlays, navigation, data-display, code-block) plus the core theming engine and CLI.

Question 11

How do I know which package a component is in?

Accepted Answer

Check the Component Import Map in the docs or llms.txt. Each component lives in exactly one package. Common gotcha: Modal, Drawer, Popover, Tooltip, and DropdownMenu are in @ninna-ui/overlays, not @ninna-ui/primitives.

Question 12

Can I customize component styles without editing source?

Accepted Answer

Yes. Ninna UI exposes 98 data-slot CSS targets. Use data-slot selectors in your CSS to target any internal element. For example: [data-slot="button"] { border-radius: 9999px; } makes all buttons rounded.

Question 13

Are the components accessible?

Accepted Answer

Yes. Complex interactive components (Modal, DropdownMenu, Tabs, Accordion, etc.) are built on Radix UI internally, which provides keyboard navigation, focus management, and ARIA semantics. All components are audited with vitest-axe for WCAG 2.1 AA compliance.

Question 14

Can I tree-shake unused components?

Accepted Answer

Yes. All packages are ESM-only with sideEffects: false. You only bundle the components you import. Installing @ninna-ui/primitives and importing only Button will not include other primitives in your bundle.

Question 15

Is Ninna UI WCAG compliant?

Accepted Answer

Ninna UI targets WCAG 2.1 AA compliance. Interactive components are built on Radix UI, which implements WAI-ARIA authoring practices. The project includes automated vitest-axe audits in its test suite.

Question 16

Do components support keyboard navigation?

Accepted Answer

Yes. All interactive components support full keyboard navigation. Menus support arrow keys and typeahead, modals trap focus and restore it on close, tabs switch with arrow keys, and accordions toggle with Enter/Space.

Question 17

Do I need to add ARIA attributes manually?

Accepted Answer

No. ARIA roles, states, and relationships are handled internally by the Radix-based components. You get correct semantics by default — just use the components as documented.

Question 18

Can I migrate from shadcn/ui to Ninna UI?

Accepted Answer

Yes. Most components map one-to-one. Replace copy-pasted imports with package imports, swap HSL CSS variables for the Ninna UI theme preset, and remove @radix-ui peer dependencies. The migration can be done page by page since both use React + Tailwind.

Question 19

Can I migrate from MUI to Ninna UI?

Accepted Answer

Yes, though it requires more work since MUI uses Emotion (CSS-in-JS) while Ninna UI uses Tailwind v4 (CSS-first). The component APIs are different, but the migration is straightforward: replace MUI imports with Ninna UI package imports and restyle with Tailwind classes.

Question 20

Can I migrate from Chakra UI to Ninna UI?

Accepted Answer

Yes. Chakra UI uses style props and a JavaScript theme provider, while Ninna UI uses CSS custom properties. The migration involves replacing Chakra components with Ninna UI equivalents and moving style props to Tailwind classes.

Question 21

Can Ninna UI components coexist with other libraries?

Accepted Answer

Yes. Ninna UI components are just React + Tailwind. They can coexist with shadcn/ui, MUI, or any other library in the same project, which makes incremental migration practical.

Question 22

Is there a tailwind.config.ts file?

Accepted Answer

No. Tailwind CSS v4 is CSS-first. All configuration is done through CSS imports and the @theme directive. Ninna UI's theme presets use CSS custom properties, so there is no JavaScript config file to maintain.

Question 23

Why do I need @source inline() for npm-published packages?

Accepted Answer

Tailwind v4 skips node_modules by default, and @source filesystem directives pointing into node_modules fail silently in many setups. Ninna UI uses an automated safelist generator that scans all component source files and writes complete @source inline() directives, ensuring all classes work when installed from npm.

Question 24

Does Ninna UI work with Tailwind v3?

Accepted Answer

No. Ninna UI is built specifically for Tailwind CSS v4.1 and uses its CSS-first configuration model. If you are on Tailwind v3, upgrade to v4 first.

Frequently Asked Questions

Getting Started

Theming

Components

Accessibility

Migration

Tailwind CSS v4