Is Ninna UI free for commercial use?

Yes. Ninna UI is MIT licensed — free for personal and commercial use. No watermarks, no attribution required, no premium tier. All 67 components and all 5 theme presets are free.

How many components does Ninna UI have?

67 components across 12 packages, plus 54 production-ready blocks (full-page UI patterns) and 5 theme presets. The component count grows with each release.

What's the bundle size impact?

Ninna UI is tree-shakeable at the package level. If you only use Button and Input, you only bundle @ninna-ui/primitives and @ninna-ui/forms (plus the tiny @ninna-ui/core CSS). No JavaScript runtime — theming is pure CSS.

Features

React Component Library

67 accessible components, 12 tree-shakeable packages, 1 CSS import. Zero-runtime theming with Tailwind CSS v4 and Radix UI.

npm install @ninna-ui/core @ninna-ui/primitives @ninna-ui/forms @ninna-ui/layout @ninna-ui/overlays @ninna-ui/navigation @ninna-ui/data-display @ninna-ui/feedback

Key features

67 accessible, production-ready React components

12 tree-shakeable ESM-only packages

Zero-runtime CSS theming — no JS provider

Tailwind CSS v4 native — CSS-first, no config file

Radix UI internals for complex widgets

98 data-slot CSS customisation targets

5 built-in theme presets with oklch colors

WCAG 2.1 AA compliant with automated axe audits

React 19 compatible, TypeScript strict

MIT licensed — free for commercial use

One library, twelve packages

Ninna UI is split into focused, tree-shakeable packages. You install only what you need — if your app doesn't use overlays, you don't pay for Modal, Drawer, Popover, or Tooltip in your bundle.

The core package (@ninna-ui/core) provides the theme system: CSS custom properties, oklch color tokens, and 5 preset themes. Component packages depend on core but not on each other, so your dependency tree stays clean.

Package overview

@ninna-ui/primitives: Button, Heading, Text, Badge, Code, Kbd, Avatar, Link, List

@ninna-ui/forms: Input, Select, Checkbox, Radio, Switch, Slider, Textarea, FileUpload, PinInput, NumberInput

@ninna-ui/layout: Box, Stack, VStack, HStack, Flex, Grid, SimpleGrid, Container, Center, Wrap, AspectRatio, Separator

@ninna-ui/navigation: Tabs, Accordion, Breadcrumb, Pagination, Stepper

@ninna-ui/overlays: Modal, Drawer, Popover, Tooltip, DropdownMenu

@ninna-ui/data-display: Card, Table, DataTable, Stat, Timeline, Calendar, Tree

@ninna-ui/feedback: Alert, Toast, Progress, Skeleton, Loading, EmptyState, Status

@ninna-ui/code-block: CodeBlock with built-in regex tokenizer (no Prism/Shiki)

Component Docs

Installation Introduction Theming Guide