Theming
Pro themes, Theme Builder, and what's different from BlakeUI OSS theming.
BlakeUI Pro uses the same theming system as BlakeUI OSS — CSS variables, BEM classes, and
@theme directives. Everything in the OSS theming guide applies to Pro components. This
page covers only what's different or additional in Pro.
CSS Import Order
When using BlakeUI Pro, always maintain this import order in your main CSS file:
@import "tailwindcss";
@import "@blakeui/styles";
@import "@blakeui/pro-react/css";The Pro CSS layer builds on top of the OSS layer. Reversing the order will cause styles to break.
Theme Builder (Pro)
The Theme Builder 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 apply to both OSS and Pro components since they share the same CSS variable foundation.
Pro Themes
BlakeUI 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 @blakeui/pro-react/css. Each theme ships two modes —
<name>-light and <name>-dark — scoped under class and data-theme selectors. You
also need to activate the mode on an ancestor element (usually <html>):
<html data-theme="brutalism-light">Brutalism
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 "@blakeui/styles";
@import "@blakeui/pro-react/css";
@import "@blakeui/pro-react/themes/brutalism";Activate with data-theme="brutalism-light" or data-theme="brutalism-dark".
Glass
A glassmorphism theme with backdrop blur, semi-transparent surfaces, and soft overlay shadows.
@import "tailwindcss";
@import "@blakeui/styles";
@import "@blakeui/pro-react/css";
@import "@blakeui/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 for the effect to be perceivable. Tune blur intensity per mode via the
--glass-blur variable.
Mouve
A refined, contemporary mauve/warm-purple theme. Saturated-accent surfaces get an elevated "raised" treatment, while neutral pill buttons pick up an inset "pressed" shadow on press for a tactile feel.
@import "tailwindcss";
@import "@blakeui/styles";
@import "@blakeui/pro-react/css";
@import "@blakeui/pro-react/themes/mouve";Activate with data-theme="mouve-light" or data-theme="mouve-dark".
Creating Your Own Theme
Use the Theme Builder to create a custom theme visually. Start from the default theme or a Pro theme, customize colors, radius, fonts, shadows, and component-level overrides, preview changes live, then export the CSS and add it to your project.