Vite

Installation

In your Vite React 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
const { nexusui } = require("@nexus-ds/react");

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

Provider Setup

After installing Nexus Design System, you need to set up the NexusUIProvider at the root of your application.

Go to the src directory and inside main.jsx or main.tsx, wrap NexusUIProvider around App:

// main.tsx or main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import {NexusUIProvider} from '@nexus-ds/react'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <NexusUIProvider>
      <App />
    </NexusUIProvider>
  </React.StrictMode>,
)

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.