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 .data-grid, .legend, .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.