Styling

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.

Completeness

Every component page declares one of three verdicts. Components that need more than their CSS carry a Behavior required badge beside their Storybook link; the rest carry nothing.

Behavior required means the stylesheet is half the component. The keyboard map, focus managed across more than one element, ARIA attributes that point at other nodes, and the [data-*] attributes the CSS keys on are all set by running code in @blakeui/pro-react. Take the CSS on its own and you get something that renders correctly and responds to nothing — it looks finished, which is exactly why it is worth flagging.

Styles sufficient means the stylesheet is the whole component. Not applicable marks a concept page rather than a rendered component. Neither has behaviour to re-implement.

Porting a component outside React? Ask the MCP server for the contract instead of inferring it from the source. get_component_behavior({components: ["BarChart"]}) returns it framework-neutral: required roles and ARIA, the full keyboard map, focus rules, and every [data-*] the stylesheet depends on — what sets each one, and when it changes. For a behavior-required component, get_css withholds the CSS until you pass behavior_source, declaring whether @blakeui/pro-react drives the component or you are writing the interaction layer yourself.