April 2026

The first public beta of HeroUI Pro React. 47 components, 4 templates, premium themes, Style Guides, and AI tooling — all built on HeroUI v3.

Overview

HeroUI Pro (@heroui-pro/react) extends HeroUI OSS with premium components, templates, and tooling. Same architecture, same theming, same accessibility foundation.

import {Command, Sidebar, DataGrid} from "@heroui-pro/react";
import {Button, Card} from "@heroui/react";

Templates

4 production-ready templates. Download the source with your license.

Dashboard

Analytics dashboard with orders, tracker, settings, and help pages.

Mail

Email client with folders, message threads, and compose views.

Chat

AI chat interface with conversations, library, and exploration views.

Finances

Finance dashboard with portfolio, spending, and transaction views.

Browse and download from the Templates page.

Built on HeroUI v3

Same principles as HeroUI v3:

Compound components — Dot-notation primitives for every slot
CSS-first theming — Tailwind CSS v4 + OKLCH variables, data-theme switching
BEM class overrides — Override globally via .command, .sidebar, .sheet in CSS
Headless-capable — Remove the CSS import, keep behavior + accessibility
CSS animations — No JS runtime, data-reduce-motion respected automatically
React Aria — Keyboard, focus, screen readers built in

Components

47 components across 7 categories. Browse all →

Charts

9 components built on Recharts.

AreaChart — Gradient fills, stacking, curve interpolation
BarChart — Grouped, stacked, waterfall layouts
LineChart — Multi-series, dashed comparisons, KPI overlays
PieChart — Donut variants, nested rings, breakdowns
RadarChart — Multi-axis comparison views
RadialChart — Gauges and progress rings
ComposedChart — Mix bar, line, and area in one chart
ChartTooltip — Shared tooltip with custom content
Widget — Dashboard container with title, KPIs, and actions

Data Display

13 components.

DataGrid — Sorting, filtering, pinning, drag-and-drop, editable cells, virtualization, bulk actions
ActionBar — Contextual toolbar on row selection
Carousel — Touch/drag, loop, autoplay, modal preview
Kanban — Drag-and-drop board with columns and swimlanes
ListView — Selectable item list with action slots
FileTree — Hierarchical browser with drag-and-drop and guide lines
FloatingToc — Scroll-tracking table of contents
HoverCard — Rich hover card with delays and placements
ItemCard / ItemCardGroup — Content cards for grids and galleries
EmptyState — Placeholder for empty views
KPI / KPIGroup — Metric cards with trends and sparklines

6 components.

AppLayout — Sidebar + navbar + main + aside scaffold
Sidebar — Collapsible groups, rail mode, mobile sheet
Navbar — Sticky nav with dropdowns, search, hide-on-scroll
Command — Command palette with search and split-view
ContextMenu — Right-click menu with submenus and selection
Segment — Segmented control for view switching

Forms

9 components.

RadioButtonGroup — Card layouts, icon cards, grid, custom indicators
CheckboxButtonGroup — Same patterns, multi-select
NumberStepper — Increment/decrement with min/max and formatting
InlineSelect — Compact inline dropdown
NativeSelect — Browser-native <select> with HeroUI styling
CellColorPicker — Settings-row color picker
CellSelect — Settings-row dropdown
CellSlider — Settings-row slider
CellSwitch — Settings-row toggle

Overlays

5 components.

Sheet — Snap points, drag-to-dismiss, nested, detached
DropZone — File drop with type/size validation and file list
EmojiPicker — Categories, search, skin tones
EmojiReactionButton — Compact reaction toggle
Stepper — Multi-step wizard, horizontal/vertical, custom icons

Feedback

4 components.

Rating — Custom icons, fractional values, read-only
TrendChip — Auto color/arrow from up/neutral/down
NumberValue — Animated number transitions
PressableFeedback — Ripple/scale/opacity wrapper

Layout

Resizable — Split panels, nested layouts, collapse-to-zero

Themes and Theming

Premium themes — Brutalism, Glass, and more. Switch with data-theme="brutalism".
Style Guides — Pick colors, adjust radius/spacing, export CSS.
OKLCH variables — Same token system as v3. Pro components read the same tokens.

@import "tailwindcss";
@import "@heroui/styles";
@import "@heroui-pro/react/css";

Building with AI

Three tools that work together. Learn more →

MCP Server

Live access to Pro docs, props, styles, and tokens. Works in Cursor, Claude Code, VS Code Copilot, Windsurf, and Zed.

.cursor/mcp.json

{
  "mcpServers": {
    "heroui-pro": {
      "url": "https://mcp.heroui.pro/mcp",
      "headers": {
        "x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN"
      }
    }
  }
}

React Pro Skill

Teaches your agent Pro conventions and common mistakes.

curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-react-pro

Design Taste Skill

78 design principles for spacing, typography, color, layout, and accessibility.

curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-pro-design-taste

Installation

1. Log in

npx heroui-pro login

2. Install

npx heroui-pro install

3. Import styles

globals.css

@import "tailwindcss";
@import "@heroui/styles";
@import "@heroui-pro/react/css";

See the full Installation guide for CI/CD setup and troubleshooting.

What's Next

This is beta.1. We're polishing APIs, adding more components, and squashing edge cases. Feedback shapes the stable release — file issues and share what you're building.

Links