Vite
Requirements:
- Vite 2 or later
- React 18 or later
- Tailwind CSS 3.4 or later
- Framer Motion 11.9 or later
To use HeroUI in your Vite project, you need to follow the following steps:
HeroUI CLI (recommended)
If you are starting a new project, you can use the HeroUI CLI to create a new project with HeroUI pre-configured:
Using HeroUI + Vite template
If you are starting a new project, you can run one of the following commands to create a Vite project pre-configured with HeroUI:
Automatic Installation
You can add individual components using the CLI. For example, to add a button component:
This command adds the Button component to your project and manages all related dependencies.
You can also add multiple components at once:
Or you can add the main library @heroui/react by running the following command:
If you leave out the component name, the CLI will prompt you to select the components you want to add.
You still need to add the provider to your app manually (we are working on automating this step).
Manual Installation
Add dependencies
In your Vite React project, run one of the following command to install HeroUI:
Hoisted Dependencies Setup
Note: This step is only for those who use
pnpmto 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.js file:
Note: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT
node_modules
Provider Setup
After installing HeroUI, you need to set up the HeroUIProvider at the root of your application.
Go to the src directory and inside main.jsx or main.tsx, wrap HeroUIProvider around App:
