Remix

Requirements:

To use NextUI in your Remix project, you need to follow the following steps:

Installation

In your Remix project, run one of the following command to install NextUI:

Tailwind CSS Setup

NextUI 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.ts
const { nextui } = require("@nextui-org/react");


import type { Config} from 'tailwindcss'


export default {
  content: [
    // ...
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()]
} satisfies Config

Provider Setup

After installing NextUI, you need to set up the NextUIProvider at the root of your application.

Go to the src directory and inside root.tsx, wrap NextUIProvider around App:

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import {NextUIProvider} from "@nextui-org/react";


export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <NextUIProvider>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
          <LiveReload />
        </NextUIProvider>
      </body>
    </html>
  );
}

Setup pnpm (optional)

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

public-hoist-pattern[]=*@nextui-org/*

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

Version 2 is only compatible with React 18 or later. If you are using React 17 or earlier, please use version 1 of NextUI.

ViteAstro