# NextUI — Beautiful Fast React Component Library with Tailwind CSS

> A modern React UI library built on Tailwind CSS and React Aria that provides accessible, customizable, and visually polished components with built-in dark mode and animation support.

## Install

Save in your project root:

# NextUI — Beautiful Fast React Component Library with Tailwind CSS

## Quick Use
```bash
npm install @nextui-org/react framer-motion
```
```jsx
import { Button } from "@nextui-org/react";
export default () => <Button color="primary">Press me</Button>;
```

## Introduction
NextUI is a React component library built on top of Tailwind CSS and React Aria. It combines accessible, WAI-ARIA compliant components with a polished visual design, smooth animations via Framer Motion, and Tailwind-based theming for fast customization.

## What NextUI Does
- Provides 40+ React components including tables, modals, dropdowns, date pickers, and autocomplete
- Uses React Aria hooks under the hood for full keyboard, screen reader, and focus management
- Integrates with Tailwind CSS for styling, enabling utility class overrides on any component
- Ships with Framer Motion animations for smooth transitions on interactive elements
- Supports automatic dark mode and custom color themes through Tailwind's plugin system

## Architecture Overview
NextUI is built as a monorepo of individually importable component packages. Each component wraps React Aria hooks for accessibility and uses Tailwind Variants for style composition. The theming layer extends Tailwind CSS with a custom plugin that injects semantic color tokens and layout scales. Animations are handled by Framer Motion, which is a required peer dependency. Components are server-component compatible with explicit "use client" boundaries where interactivity is needed.

## Self-Hosting & Configuration
- Install the main package and Framer Motion, then add the NextUI plugin to `tailwind.config.js`
- Wrap your app with `<NextUIProvider>` for theme context and routing integration
- Import components individually (`@nextui-org/button`) for optimal tree-shaking
- Customize colors and layout tokens by extending the NextUI plugin configuration in Tailwind
- Use the `classNames` prop on components to override specific internal element styles with Tailwind classes

## Key Features
- Full React Aria accessibility: every interactive component meets WAI-ARIA standards
- Tailwind CSS integration lets you override styles with utility classes you already know
- Dark mode and custom themes without writing any CSS — configure tokens in Tailwind config
- Smooth animations via Framer Motion included by default on transitions and interactions
- Individually installable packages so you only bundle the components you use

## Comparison with Similar Tools
- **shadcn/ui** — copy-paste approach with Radix primitives; more manual setup but no runtime dependency
- **Chakra UI** — similar accessible component library; uses Emotion instead of Tailwind for styling
- **Material UI** — larger component set with Material Design aesthetic; heavier CSS-in-JS runtime
- **DaisyUI** — Tailwind component classes without React logic; CSS-only with no accessibility layer
- **Headless UI** — unstyled primitives from Tailwind Labs; requires you to build all visual design

## FAQ
**Q: Does NextUI require Tailwind CSS?**
A: Yes. NextUI is built on Tailwind CSS and uses a Tailwind plugin for its theming system. Tailwind must be configured in your project.

**Q: Is NextUI compatible with Next.js App Router?**
A: Yes. NextUI components work with Next.js App Router. Components that need interactivity include the "use client" directive. Wrap your app in `<NextUIProvider>` in a client layout.

**Q: Why does NextUI require Framer Motion?**
A: NextUI uses Framer Motion for enter/exit animations and transitions on components like modals, dropdowns, and tooltips. It is a required peer dependency.

**Q: Can I use only some NextUI components?**
A: Yes. Each component is published as a separate package (e.g., `@nextui-org/button`). You can install and import only what you need.

## Sources
- https://github.com/nextui-org/nextui
- https://nextui.org/

---
Source: https://tokrepo.com/en/workflows/56495b3b-3eae-11f1-9bc6-00163e2b0d79
Author: AI Open Source