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