Recipes
Short, code-forward recipes — real use cases and how Salty CSS solves them. Filter by framework or search inline.
For your stack
Recipes for React
Build a Theme Toggle With No Runtime CSS
A dark/light theme that flips on a `data-theme` attribute — every rule for both themes is generated at build time.
React
Next.js
AstroDecouple a Heading's Tag From Its Looks
A `Heading` styled component whose default tag is `<h2>`, with an `as` prop that swaps the element per call site — typed, no runtime cost.
ReactNext.jsAstroStatus Badges Whose Shared Rules Never Block Local Overrides
Use `anyOfVariants` and `:where()` to share styles across several variant branches without raising specificity — call-site overrides always win.
ReactNext.jsAstroFluid Typography From One Helper, No Media-Query Stair-Steps
Build a headline that scales smoothly from mobile to 4K with a single `defineViewportClamp` helper instead of a stack of `@media` rules.
ReactNext.jsAstroAuto-Generated Hover and Active Shades With color()
Derive hover, active, and disabled shades from a single brand color — the math runs at build time and ships as static CSS.
ReactNext.jsAstroStagger a List Animation Without Writing a Class per Item
One `keyframes` value and a variant prop drive a list that fades in with a cascading delay — no per-item CSS, no JS timing logic.
ReactNext.jsAstroBeat a Third-Party Reset Without Reaching for !important
Lift a component into a higher CSS layer with `priority` — selector specificity stays flat, the override wins, no `!important` left behind.
ReactNext.jsAstroA Single-Instance Override via a CSS Variable, Not a New Variant
Expose tunable knobs as CSS custom properties on a component, then override them per call site with `style={{ "--knob": … }}` — typed, layer-busting, no new variant required.
ReactNext.jsAstroEnforce a Design Scale With a Custom Modifier
Add a `defineConfig` modifier that rewrites `padding: "px:16"` into `1rem` — every developer is on the same scale without anyone policing PRs.
ReactNext.jsAstro