Installation

Requirements:

• React 18 or later
• Tailwind CSS 3.4 or later
• Framer Motion 4 or later
• @nextui-org/react 2.2.1 or later
• tailwindcss-animate 1.0.1 or later
• react-icons 5.0.1 or later

Follow the steps below to setup your React Project to use Pixel UI components

• Install 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

  import * as React from "react"; // 1. import `NextUIProvider` component import {NextUIProvider} from "@nextui-org/react"; function App() { // 2. Wrap NextUIProvider at the root of your app return ( <NextUIProvider> <YourApplication /> </NextUIProvider> ); }

  import * as React from "react";
  // 1. import `NextUIProvider` component
  import {NextUIProvider} from "@nextui-org/react";
  
  function App() {
    // 2. Wrap NextUIProvider at the root of your app
    return (
      <NextUIProvider>
        <YourApplication />
      </NextUIProvider>
    );
  }