Theme customiser
Tweak the --mui-* tokens on the left and watch the preview on the right re-render instantly. Changes are saved to localStorage so they survive reloads. Export a :root block when you're happy, paste into your app.
Swatch grid (live tokens)
Background
--mui-bg
Card
--mui-bg-card
Input
--mui-bg-input
Text
--mui-text
Muted
--mui-text-muted
Subtle
--mui-text-subtle
Border
--mui-border
Border hover
--mui-border-hover
Border focus
--mui-border-focus
Accent
--mui-accent
Accent text
--mui-accent-text
Danger
--mui-danger
Buttons
Form controls
We never share this.
At least 8 characters.
Card + badges + alert
Deployment status
Buildgreen
Testsgreen
Deploy queuebusy
Canaryholding
Token changes apply live
Every component that reads --mui-* tokens — from this alert to the minimap on the xyflow page — re-renders instantly.
Export
Paste this :root block into your app's global CSS. All overrides are inline so you can re-enable maud-ui's defaults by removing this block.
/* ready — the block updates as you tweak tokens */