@heroui-pro/react
v1.0.0-beta.3
Published
HeroUI React
Readme
HeroUI React Pro
Premium composable components that extend HeroUI — built for production web apps
HeroUI Pro is a premium extension of HeroUI OSS — production-ready, fully composable components that follow the same patterns you already know from HeroUI OSS. New components, themes, and fixes ship regularly as package updates.
What’s included
- 46+ React components with 390+ examples — Command Palette, Data Grid, Sheet, Sidebar, Emoji Picker, Charts, File Tree, KPI cards, and more — each with full documentation
- React Native — The same design system with a similar API across iOS and Android (
[heroui-native-pro](https://www.npmjs.com/package/heroui-native-pro)) - Templates — Production-ready dashboards, mail, chat, and finance apps
- Premium themes — Brutalism, Glass, and more. Switch aesthetics in one import
- Theme Builder — Create custom themes visually, preview live in the docs, and export the CSS
- Figma — Design files for all Pro components + a theme variables sync plugin
- AI tooling — MCP server, agent skills, and design taste for AI-assisted development
- Priority support — Fast support, prioritized issues, private Discord, and a VIP badge
- Teams & Enterprise — Shared themes, centralized billing, SSO, and dedicated support
Requirements
- React 19+
- Tailwind CSS v4
- HeroUI OSS (
@heroui/react+@heroui/styles)
If you have not set up HeroUI OSS yet, follow the HeroUI quick start first.
Installation
1. Log in
npx heroui-pro loginYou can use bunx heroui-pro login or pnpm heroui-pro login instead.
2. Install
npx heroui-pro installThe CLI adds **@heroui-pro/react** (and **heroui-pro** as needed), downloads Pro artifacts, installs missing peer dependencies, and can configure pnpm / bun so postinstall scripts stay trusted.
Run npx heroui-pro with no arguments for the interactive menu.
3. Import styles
In your main CSS (e.g. globals.css), keep this order:
@import 'tailwindcss';
@import '@heroui/styles';
@import '@heroui-pro/react/css';4. CI / automated installs
For GitHub Actions, Vercel, Netlify, and similar, set **HEROUI_AUTH_TOKEN** from a CI/CD token in the HeroUI dashboard. With that env var set, npm install (or your PM’s equivalent) can download Pro artifacts without interactive login.
See the full guide: Installation.
CLI (quick reference)
| Command | Description |
| ------------------------------ | ----------------------------------------------- |
| heroui-pro login | Log in with GitHub |
| heroui-pro install | Add Pro packages, peers, and PM config |
| heroui-pro install --yes | Non-interactive install |
| heroui-pro install --dry-run | Preview installs |
| heroui-pro status | Login and installed products |
| heroui-pro logout | Sign out |
| heroui-pro docs | Open heroui.pro/docs |
Next steps
License
See LICENSE.
