Customization
Jazz uses @layer to stay out of your way. Any styles you
write outside of a layer automatically win over Jazz's defaults.
How it works
All Jazz styles are scoped inside @layer jazz. The CSS
cascade gives unlayered styles the highest priority, so you can override
anything simply by writing regular CSS — no !important, no
increased specificity needed.
/* jazz internals — low priority */
@layer jazz {
button {
border-radius: 8px;
}
}
/* your styles — always win */
button {
border-radius: 0;
}Overriding styles
Write your overrides in a plain stylesheet, after the Jazz import. You can target any element or class Jazz exposes.
<link rel="stylesheet" href="jazz/jazz.css" />
<link rel="stylesheet" href="your-styles.css" />
Or inline in a <style> tag, or inside your own
@layer as long as it is declared after
jazz in the layer order.
Example
Here is a button with Jazz's default styling next to one with
border-radius: 0 applied via a local override.
/* your-styles.css */
button {
border-radius: 0;
}
The same technique works for any property — spacing, font sizes,
colors, transitions, and so on. Jazz's token system (CSS custom
properties like --jazz-primary) gives you an additional
lever: changing a token updates every component that references it at
once. See Themes for details.