Theming

HeroUI Pro uses the same theming system as HeroUI OSS — CSS variables, BEM classes, and @theme directives. If you haven't already, read the full Theming guide on heroui.com to understand the foundations.

CSS Import Order

When using HeroUI Pro, always maintain this import order in your main CSS file:

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

The Pro CSS layer builds on top of the OSS layer. Reversing the order will cause styles to break.

Theme Builder (Pro)

The Theme Builder is a Pro feature that lets you visually customize your entire design system — colors, radius, fonts, shadows, and more — then see the changes live in the docs and export the CSS.

Changes made in the Theme Builder apply to both OSS and Pro components since they share the same CSS variable foundation.

Pro Themes

HeroUI Pro ships with premium design system themes that go beyond color changes — they override component styles, fonts, shadows, and radii to create distinct aesthetics.

Brutalism

A bold, high-contrast theme with sharp edges, thick borders, and expressive shadows:

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

Pro themes are imported after @heroui-pro/react/css and override both OSS and Pro component styles. Each theme includes:

• Font loading — custom web fonts via @import url()
• Theme variables — colors, radii, shadows, spacing overrides in a theme layer
• Component overrides — BEM class overrides for both OSS and Pro components in a components layer

Creating Your Own Theme

Use the Theme Builder to create a custom theme visually. You can:

1. Start from the default theme or a Pro theme (like Brutalism)
2. Customize colors, radius, fonts, shadows, and component-level overrides
3. Preview changes live in the docs
4. Export the CSS and add it to your project

Pro-Specific CSS Variables

Beyond the OSS color variables, Pro adds chart colors that derive from your accent color. See the Colors page for details.