Vite & HeroUI Template

This is a template for creating applications using Vite 6 and HeroUI (v2).

Try it on CodeSandbox

Star the project

If you appreciate my work, please consider giving it a star! 🤩

Technologies Used

• Vite 6
• HeroUI
• Tailwind CSS 4
• Tailwind Variants
• React 19
• ESLint 9
• TypeScript
• Framer Motion

Tailwind CSS 4

This template uses Tailwind CSS 4, which is a utility-first CSS framework. You can customize the styles by modifying the tailwind.config.js file.
Currently HeroUI uses Tailwind CSS 3, but @winchesHe create a port of HeroUI to Tailwind CSS 4, you can find it here, HeroUI packages are available at heroui-inc/heroui#4656 (comment).

How to Use

To clone the project, run the following command:

git clone https://github.com/sctg-development/vite-react-heroui-template.git

Manual chunk splitting

In the vite.config.ts file, all @heroui packages are manually split into a separate chunk. This is done to reduce the size of the main bundle. You can remove this configuration if you don't want to split the packages.

Install dependencies

You can use one of them npm, yarn, pnpm, bun, Example using npm:

npm install

Run the development server

npm run dev

Setup pnpm (optional)

If you are using pnpm, you need to add the following code to your .npmrc file:

public-hoist-pattern[]=*@heroui/*

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

License

Licensed under the MIT license.