NextUI

Language: JavaScript

UI Framework

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.

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.

Installation

npm: npm install @nextui-org/react
yarn: yarn add @nextui-org/react
cdn: NextUI does not provide a CDN build; install via npm or yarn.
manual: Install via npm/yarn and wrap your app with <NextUIProvider> to enable theming and global styles.

Usage

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.

Button usage

import { Button } from '@nextui-org/react';

<Button color="primary">Click Me</Button>

Renders a primary styled button using NextUI.

Input component

import { Input } from '@nextui-org/react';

<Input clearable label="Email" placeholder="Enter your email" />

Creates a styled input field with a label and clearable option.

Modal component

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>
    </>
  );
}

Shows how to use NextUI’s modal with header and body content.

Navbar

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>

Implements a responsive navbar using NextUI’s components.

Error Handling

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.

Official DocsGithub