Astro

Install React

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

Install HeroUI

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

Hoisted Dependencies Setup

Note: This step is only for those who use pnpm to install. If you install HeroUI using other package managers, you may skip this step.

If you are using pnpm, you need to add the following line to your .npmrc file to hoist our packages to the root node_modules.

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

Tailwind CSS Setup

HeroUI 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:

Note: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT node_modules

Usage

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

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