Getting started
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.
Installation
Inside your React project directory, install NextUI by running either of the following:
yarn add @nextui-org/react
npm i @nextui-org/react
Setup
For NextUI to work correctly, you need to set up the NextUIProvider at the root of your application.
React
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 (
<NextUIProvider>
<Component />
</NextUIProvider>
);
}
Next.js
Go to app/Provider.tsx (create it if it doesn't exist) and add this:
Go to app/layout.tsx (create if it doesn't exist) and add this:
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.
Individual components import
