Remix

Installation

• Create A New Vite Project

  $ npm create vite@latest

• Install Required Packages

  $ npm install @nextui-org/react framer-motion tailwindcss-animated react-icons

• Tailwind CSS Setup

  // tailwind.config.js import { nextui } from "@nextui-org/react"; /** @type {import('tailwindcss').Config} */ const config = { content: [ // ... "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}" ], theme: { extend: {}, }, darkMode: "class", plugins: [nextui(), require("tailwindcss-animated")] } export default config;

  // tailwind.config.js
  import { nextui } from "@nextui-org/react";
  
  /** @type {import('tailwindcss').Config} */
  const config = {
    content: [
      // ...
      "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
    ],
    theme: {
      extend: {},
    },
    darkMode: "class",
    plugins: [nextui(), require("tailwindcss-animated")]
  }
  
  export default config;
  

• Provider Setup

  // main.tsx or main.jsx import React from 'react' import ReactDOM from 'react-dom/client' import {NextUIProvider} from '@nextui-org/react' import App from './App' import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <NextUIProvider> <App /> </NextUIProvider> </React.StrictMode>, )

  // main.tsx or main.jsx
  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import {NextUIProvider} from '@nextui-org/react'
  import App from './App'
  import './index.css'
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <NextUIProvider>
        <App />
      </NextUIProvider>
    </React.StrictMode>,
  )