React

React Component Library

Ninna UI is the best Tailwind CSS v4 component library for React projects. 69 accessible React components, CSS-only theming, and zero runtime overhead.

React

React, maintained by Meta, uses a component-based architecture to build complex UIs from small, reusable pieces. Its virtual DOM and declarative syntax make applications fast and predictable to develop.

React + Ninna UI

Here's why Ninna UI is the perfect component library for your React project:

Real React components — not CSS classes or copy-paste code. Every component includes forwardRef, displayName, and TypeScript generics.

Zero runtime theming — CSS-only imports mean no ThemeProvider wrappers polluting your React tree.

Radix-powered accessibility for complex widgets (Select, Dialog, Tooltip, etc.) without managing Radix dependencies directly.

Tree-shakeable packages — import only what you use, keeping React bundles lean.

98 data-slot CSS targets — customize any inner element with plain CSS, no React context or styled-components needed.

oklch perceptual colors — modern color system that pairs perfectly with React's declarative approach.

Install Tailwind CSS and Ninna UI for React

Setting up Ninna UI with React takes just a few minutes.

Install Ninna UI packages:

npm install @ninna-ui/core @ninna-ui/primitives @ninna-ui/forms @ninna-ui/layout

Add the theme import to your CSS file:

@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";

Use components in your React app:

import { Button } from "@ninna-ui/primitives";
import { Input } from "@ninna-ui/forms";

export function LoginForm() {
  return (
    <form className="space-y-4">
      <Input placeholder="Email" type="email" />
      <Input placeholder="Password" type="password" />
      <Button color="primary" className="w-full">
        Sign In
      </Button>
    </form>
  );
}

Example

Here's what a React app looks like with Ninna UI — clean, minimal, no wrappers:

import { Button, Heading, Text } from "@ninna-ui/primitives";
import { VStack, Container } from "@ninna-ui/layout";

export function Hero() {
  return (
    <Container>
      <VStack gap="4" align="center">
        <Heading as="h1" size="4xl">Build faster with Ninna UI</Heading>
        <Text className="text-base-content/60">CSS-first React components for modern apps.</Text>
        <Button color="primary" size="lg">Get Started</Button>
      </VStack>
    </Container>
  );
}

69 components available

Ninna UI provides a comprehensive set of React components organized into focused packages:

@ninna-ui/primitives

Button, Heading, Text, Badge, Code, Kbd, Avatar

@ninna-ui/forms

Input, Select, Checkbox, Radio, Switch, Slider, Textarea

@ninna-ui/layout

Box, VStack, HStack, Container, Center, Grid, Separator

@ninna-ui/navigation

Tabs, Accordion, Breadcrumb, Pagination, Steps

@ninna-ui/data-display

Card, Table, DataTable, Stat, Timeline, Calendar, Tree

@ninna-ui/feedback

Alert, Toast, Progress, Skeleton, Loading, EmptyState

Browse all components

Start building with React + Ninna UI

One CSS import, zero JavaScript config. Get started in under 60 seconds.

Install Guide Browse Examples

Ninna UI for other frameworks

Next.js Component Library

React Router Component Library

Vite Component Library

Remix Component Library

Compare UI Libraries

Learn more about React