Next.js

Requirements:

Next.js 12 or later
React 18 or later
Tailwind CSS 3 or later
Framer Motion 4 or later

To use Nexus Design System in your Next.js project, you need to follow the steps below, depending on your project structure.

App directory Setup

Next.js 13 introduces a new app/ directory structure. By default it uses Server Components. As Nexus Design System components use React hooks, we added the use client; at build time, so you can import them directly in your React Server Components (RSC).

create-next-app

If you are starting a new project, you can run one of the following command to create a Next.js project pre-configured with nexus:

Manual Installation

Add dependencies

In your Next.js project, run one of the following command to install nexus:

Tailwind CSS Setup

Nexus Design System is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official installation guide to install Tailwind CSS. Then you need to add the following code to your tailwind.config.js file:

// tailwind.config.js
import {nexusui} from "@nexus-ds/react";

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    // ...
    "./node_modules/@nexus-ds/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nexusui()]
}

export default config;

Setup Provider

Go to your app/providers.tsx or app/providers.jsx (create it if it doesn't exist) and wrap the Component with the NexusUIProvider:

// app/providers.tsx
'use client'

import {NexusUIProvider} from '@nexus-ds/react'

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <NexusUIProvider>
      {children}
    </NexusUIProvider>
  )
}

Add Provider to Root

Now, Go to your root layout page and wrap it with the NexusUIProvider:

// app/layout.tsx
import {Providers} from "./providers";

export default function RootLayout({children}: { children: React.ReactNode }) {
  return (
    <html lang="en" className='dark'>
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

Note: Nexus Design System automatically add two themes light and dark to your application. You can use any of them by adding the dark/light class to the html tag. See the theme docs for more details.

Use Nexus Design System Components

Now you can import any Nexus Design System component directly in your Server Components without needing to use the use client; directive:

// app/page.tsx
import {Button} from '@nexus-ds/button'; 

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

Important 🚨: Note that you need to import the component from the individual package, not the from @nexus-ds/react.

Setup pnpm (optional)

If you are using pnpm, you need to add the following code to your .npmrc file:

public-hoist-pattern[]=*@nexus-ds/*

After modfiying the .npmrc file, you need to run pnpm install again to ensure that the dependencies are installed correctly.

Pages Directory Setup

If you are using the /pages Next.js project structure, you need to follow the steps below.