Pro themes, Design Systems, 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.
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.
Design Systems 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 Design Systems apply to both OSS and Pro components since they share the same CSS variable foundation.
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:
@import url() (when the theme changes typography)theme layercomponents layerEach 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, mouve-light / mouve-dark) as the theme values instead of light / dark.
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".
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.
A refined, contemporary mauve/warm-purple theme. Saturated-accent surfaces (filled buttons, selected calendar cells, switch/slider/progress/meter fills, segment ghost indicator, stepper completed steps, etc.) get an elevated treatment — a layered "raised" shadow stack with an inset specular highlight, accent border, and a soft top-light gradient overlay — while neutral pill buttons (secondary, tertiary, ghost) pick up an inset "pressed" shadow on press for a tactile feel. Keeps the default typography.
@import "tailwindcss";
@import "@heroui/styles";
@import "@heroui-pro/react/css";
@import "@heroui-pro/react/themes/mouve"; Activate with data-theme="mouve-light" or data-theme="mouve-dark".
Mouve exposes three reusable shadow tokens — --mouve-raised-shadow (raised/elevated surfaces), --mouve-pressed-shadow (depressed/pressed neutral surfaces), and --mouve-accent-fill-shadow (inset-only variant for chips/badges) — so you can extend the look to your own components by composing them into box-shadow.
Use the Design Systems to create a custom theme visually. You can:
Beyond the OSS color variables, Pro adds chart colors that derive from your accent color. See the Colors page for details.