Getting started

Welcome to the NextUI documentation!

NextUI allows you to make beautiful, modern, and fast websites/applications regardless of your design experience, created with React.js and Stitches, based on React Aria and inspired by Vuesax.


Inside your React project directory, install NextUI by running either of the following:

yarn add @nextui-org/react
npm i @nextui-org/react


For NextUI to work correctly, you need to set up the NextUIProvider at the root of your application.


Go to the root of your application and do this:

import * as React from 'react';

// 1. import `NextUIProvider` component
import { NextUIProvider } from '@nextui-org/react';

function App({ Component }) {
  // 2. Use at the root of your app
  return (
      <Component />


  1. Go to pages/_app.js or pages/_app.tsx (create it if it doesn't exist) and add this:
// 1. import `NextUIProvider` component
import { NextUIProvider } from '@nextui-org/react';

function MyApp({ Component, pageProps }) {
  return (
    // 2. Use at the root of your app
      <Component {...pageProps} />

export default MyApp;
  1. Go to pages/_document.js or pages/_document.tsx (create if it doesn't exist) and add this:
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      styles: React.Children.toArray([initialProps.styles])

  render() {
    return (
      <Html lang="en">
          <Main />
          <NextScript />

export default MyDocument;

For more information about Next.js + NextUI SSR check out the documentation.

Using NextUI components

Once NextUI is installed you can use any of the components as follows. NextUI uses tree-shaking so the unused modules will not be included in the bundle during the build process and each component is exported separately.

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

const Component = () => <Button>Click me</Button>;

Individual components import

import Button from '@nextui-org/react/button';

const Component = () => <Button>Click me</Button>;

NextUIProvider Props

AttributeTypeAccepted valuesDescriptionDefault
themeNextUIThemesThemeObjectOptional custom theme, by default NextUI applies light theme-
disableBaselinebooleantrue/falseNextUI automatically includes <CssBaseline/>false

Typescript types

Theme object

For more information you can see the Stitches theme documentation

  "type": "light", // light / dark
  "className": "", // optional
  "theme": {
    "colors": {},
    "space": {},
    "fontSizes": {},
    "fonts": {},
    "fontWeights": {},
    "lineHeights": {},
    "letterSpacings": {},
    "sizes": {},
    "borderWidths": {},
    "borderStyles": {},
    "radii": {},
    "shadows": {},
    "zIndices": {},
    "transitions": {}


We're excited to see the community adopt NextUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

Warning 🚧

This project is still in development, it might have bugs and breaking changes so it is not recommended to use it in production. We hope to have a stable version soon 🚀.


PR's on NextUI are always welcome, please see our contribution guidelines to learn how you can contribute to this project.

gradient blue backgroundgradient violet background