What it is
NextUI is a modern React UI library built with accessibility, dark mode, and theming support out of the box. It offers a sleek design system with customizable and easy-to-use components.
NextUI provides pre-styled, accessible components like buttons, modals, tooltips, inputs, and layout primitives. It supports light/dark themes and custom theming with a minimal API.
Installation
npm install @nextui-org/reactGetting started
The smallest useful thing you can do with it, and what each part means.
import { Button } from '@nextui-org/react';
<Button color="primary">Click Me</Button>import { Input } from '@nextui-org/react';
<Input clearable label="Email" placeholder="Enter your email" />Advanced usage
Where the library earns its place over a simpler alternative.
import { useState } from 'react';
import { Modal, Button, Text } from '@nextui-org/react';
function Demo() {
const [visible, setVisible] = useState(false);
return (
<>
<Button onPress={() => setVisible(true)}>Open Modal</Button>
<Modal isOpen={visible} onOpenChange={setVisible}>
<Modal.Header>
<Text b size={18}>NextUI Modal</Text>
</Modal.Header>
<Modal.Body>
<Text>Here is the modal content.</Text>
</Modal.Body>
</Modal>
</>
);
}import { Navbar, Button, Link } from '@nextui-org/react';
<Navbar isBordered>
<Navbar.Brand>
<Link href="#">MyApp</Link>
</Navbar.Brand>
<Navbar.Content>
<Navbar.Link href="#home">Home</Navbar.Link>
<Navbar.Link href="#about">About</Navbar.Link>
<Button auto flat>Login</Button>
</Navbar.Content>
</Navbar>Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- Styles not applied
- Ensure <NextUIProvider> wraps your app and @nextui-org/react is installed correctly.
- Dark mode not toggling
- Use NextUI’s theme API and verify your app has a proper color scheme provider setup.
- Build issues in SSR (Next.js)
- Follow NextUI’s SSR setup guide to avoid hydration mismatches.
Best practices
- Wrap your app with <NextUIProvider> to enable theming and global context.
- Use built-in dark mode and theming support to enhance UX.
- Import only the components you need to keep the bundle size smaller.
- Combine NextUI with frameworks like Next.js for seamless integration.
- Override theme tokens when you need brand-specific colors and typography.
Background
Why it exists, and what it was reacting to.
NextUI was created to provide a lightweight, fast, and visually appealing UI library for React applications. It focuses on simplicity, developer experience, and beautiful defaults while supporting full customization through theming.