Back to blogJuly 31, 2023

Introducing NextUI Version 2.0

We're thrilled to announce the release of NextUI v2.0. Our mission has always been to create a more efficient, flexible, beautiful and customizable UI library for you. And, this update is a huge leap towards achieving that.

Transition to TailwindCSS - Our shift to TailwindCSS.
TailwindCSS Plugin - Introducing theme customization plugin.
React Server Components - Enhanced performance with React Server Components.
Custom Themes, Layouts, Colors - New customizability options.
Enhanced Documentation - A better navigation experience.
New Templates & Guides - Easier app creation process.
Custom Variants - Customization of components' variants.
Enhanced Styling Model - Effortless component styling.
Tailwind Variants - Our new library for better TailwindCSS handling.
Revamped Components - Rewritten components with react-aria hooks.
Optimized Animations - Smoother app animations.
Individual Packages - Install only what you need.
Dark Mode Support - Easier implementation of dark mode.
New Components - Six new components added.
Figma Community File - Streamlining design-to-development process.
Get Started - Get on board with NextUI v2.0.

What's New in Version 2?

Transition from Stitches to TailwindCSS

We've transitioned from Stitches to TailwindCSS, eliminating runtime styles and bringing you a more flexible and customizable UI library. This change allows you to use NextUI v2 with the latest versions of React and Next.js without running into React Server Components issues.

TailwindCSS Plugin

NextUI v2.0 comes with a TailwindCSS plugin that enables the customization and addition of default themes. This plugin allows you to customize colors and layouts tokens that are used by NextUI components.

Note: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT node_modules

// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

Go to Themes documentation to learn more about the plugin and how to use it.

React Server Components Support

Thanks to the switch to TailwindCSS, NextUI v2.0 now supports React Server Components by default. This improves performance and allows you to use it with the latest versions of React and Next.js.

NextUI components already include the use client; directive so you can import them directly in your React Server Components (RSC).

// app/page.tsx
import {Button} from "@nextui-org/button";

export default function Page() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Custom Themes, Layouts and Colors

The nextui TailwindCSS plugin allows you to customize the default themes, layouts and colors tokens. It also allows you to add new themes and customize them.

module.exports = {
  plugins: [
    nextui({
      themes: {
        light: {
          layout: {}, // light theme layout tokens
          colors: {}, // light theme colors
        },
        dark: {
          layout: {}, // dark theme layout tokens
          colors: {}, // dark theme colors
        },
        custom: {
          layout: {
            // custom theme layout tokens
            extend: "light" / "dark", // extend from light or dark theme
          },
          colors: {}, // custom theme colors
        },
        // ... custom themes
      },
    }),
  ],
};

Check out the Layout and Colors documentation for better understanding of the layout and colors tokens.

Enhanced Documentation

We've built our new documentation on top of Next.js 13 using the App directory, making it simpler, more robust, and more helpful than ever before. Additionally, we've improved the structure by placing useful links at the top of each component documentation, such as the component storybook, npm, react-aria hooks, and links to the source code and styles source code.

New Templates and Guides

Two Next.js templates for App and Pages directories, alongside Vite, Remix, and Astro installation guides, are introduced to aid your app creation process.

Next.js Templates

Frameworks

Custom Variants

We've added a new function, extendVariants, that allows you to customize any NextUI components's variants.

You can create or override the component variants, defaultVariants and compoundVariants.

Check out the Custom Variants documentation for more information.

Enhanced Styling Model

With the new slots model, you can style every part of your components effortlessly.

Check out the Override Styles documentation for more information.

Tailwind Variants

Our new library, Tailwind Variants, allows you to write TailwindCSS for large components in a reusable and clear way. It automatically handles TailwindCSS class conflicts and all NextUI components are built on top of it.

Check out the Tailwind Variants documentation for more information.

Revamped Components

All components are written from scratch and integrated with react-aria hooks, ensuring enhanced performance and better accessibility.

Optimized Animations

Thanks to framer-motion, we've significantly improved and optimized animations to make your app feel more fluid and smooth.

Individual Packages Support

Install only what you need, reducing CSS bundle as it will only include styles for the components you're actually using.

npm i @nextui-org/button

Check out the Individual Packages documentation for more information.

Dark Mode Support

Implementing dark mode has never been easier. Thanks to the nextui TailwindCSS plugin, you can now use the dark theme by just adding the dark class to the body / html or main tag.

// main.tsx or main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import {NextUIProvider} from "@nextui-org/react";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <NextUIProvider>
      <main className="dark text-foreground bg-background">
        <App />
      </main>
    </NextUIProvider>
  </React.StrictMode>,
);

Note: text-foreground and bg-background changes the text and background colors to the current theme.

New Components

We've added 6 new components, expanding the possibilities of what you can create.

Chip: Small block of essential information that represent an input, attribute, or action.
Divider: A line that separates content in a page.
Kbd: Displays which key or combination of keys performs a given action.
Skeleton: Placeholder for loading content.
Snippet: Displays a code snippet.
Tabs: Organize content into separate views where only one view is visible at a time.

Figma Community File

We're excited to also announce our Figma Community File. This file will enable you to easily translate your designs into NextUI components. Whether you're a solo developer or working with a design team, our Figma file helps streamline the process of transforming design ideas into functioning UI components.

This file is still in development and will be continuously updated.