Astro

Install React

NextUI is built on top of React, so you need to install React first. You can follow the official integration guide to install React.

Install NextUI

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

npm i @nextui-org/react framer-motion

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.cjs file:

// tailwind.config.cjs
const { nextui } = require("@nextui-org/react");

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

Usage

Now you can import NextUI components and use them in your Astro project:

---
import Layout from '../layouts/Layout.astro';
import {Button} from '@nextui-org/react';
---

<Layout title="Welcome to Astro.">
  <main>
      <Button color="primary" client:visible>My button</Button>
  </main>
</Layout>

Note that you have to add client:visible to the component to make it visible only on the client side. Otherwise some functionalities of NextUI components may not work properly.

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 modifying the .npmrc file, you need to run pnpm install again to ensure that the dependencies are installed correctly.