Theming
Pro themes, Theme Builder, and what's different from HeroUI OSS 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.
Everything in the OSS theming guide applies to Pro components. This page covers only what's different or additional in Pro.
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.
Pro themes are imported after @heroui-pro/react/css and override both OSS and Pro component styles. A theme can include:
- Font loading — custom web fonts via
@import url()(when the theme changes typography) - Theme variables — colors, radii, shadows, spacing overrides in a
themelayer - Component overrides — BEM class overrides for both OSS and Pro components in a
componentslayer
Each theme ships two modes — <name>-light and <name>-dark — scoped under class and data-theme selectors. Importing the CSS is not enough on its own; you also need to activate the mode on an ancestor element (usually <html>):
<html data-theme="brutalism-light">You can wire this up to your existing theme toggle (for example, next-themes) by using brutalism-light / brutalism-dark (or glass-light / glass-dark) as the theme values instead of light / dark.
Brutalism
A bold, high-contrast theme with sharp edges, thick borders, and expressive shadows. Ships custom display/body fonts (Anton + Share Tech Mono), zero radius, and minimal shadows.
@import "tailwindcss";
@import "@heroui/styles";
@import "@heroui-pro/react/css";
@import "@heroui-pro/react/themes/brutalism"; Activate with data-theme="brutalism-light" or data-theme="brutalism-dark".
Glass
A glassmorphism theme with backdrop blur, semi-transparent surfaces, and soft overlay shadows. Overrides shadow-using components (cards, popovers, modals, dropdowns, fields, etc.) with backdrop-filter: blur(...), and keeps the default typography.
@import "tailwindcss";
@import "@heroui/styles";
@import "@heroui-pro/react/css";
@import "@heroui-pro/react/themes/glass"; Activate with data-theme="glass-light" or data-theme="glass-dark".
Glass relies on backdrop-filter. Make sure surfaces behind blurred components have visible content (a background image, gradient, or the provided --background-gradient) for the effect to be perceivable. Tune blur intensity per mode via the --glass-blur variable.
Creating Your Own Theme
Use the Theme Builder to create a custom theme visually. You can:
- Start from the default theme or a Pro theme (like Brutalism or Glass)
- Customize colors, radius, fonts, shadows, and component-level overrides
- Preview changes live in the docs
- 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.