Quick Start
Get started with HeroUI v3 in minutes
Requirements
Quick Install
Install HeroUI and required dependencies:
npm i @heroui/styles@alpha @heroui/react@alpha
pnpm add @heroui/styles@alpha @heroui/react@alpha
yarn add @heroui/styles@alpha @heroui/react@alpha
bun add @heroui/styles@alpha @heroui/react@alpha
Import Styles
Add to your main CSS file globals.css
:
@import "tailwindcss";
@import "@heroui/styles";
Import order matters. Always import tailwindcss
first.
Use Components
import { Button } from '@heroui/react';
function App() {
return (
<Button>
My Button
</Button>
);
}
What's Next?
- Browse Components - See all available components
- Learn Styling - Customize with Tailwind CSS
- Explore Patterns - Master compound components