Styling
Style HeroUI Pro components with CSS, Tailwind, or CSS-in-JS
HeroUI Pro components follow the exact same styling patterns as HeroUI OSS — className props, Tailwind utilities, BEM classes, data attributes, render props, and CSS-in-JS all work the same way.
Read the full Styling guide on heroui.com to learn all the available styling approaches.
The only difference is the CSS class prefix. OSS components use names like .button, .card, .tabs, while Pro components use names like .command, .sheet, .sidebar, .kpi. The BEM pattern is identical:
/* OSS component */
.button { /* base */ }
.button--sm { /* size modifier */ }
/* Pro component — same pattern */
.command { /* base */ }
.command__dialog--sm { /* size modifier */ }See each component's documentation for the full list of available CSS classes.