For React

Sprinkle Salty CSS on your React app

Build-time CSS-in-TS that ships zero runtime — and feels right at home next to your components.

The styled API you remember

Components > class names, with variants, compound variants, and typed prop tokens — the Stitches DX, served zero-runtime.

Zero-runtime extraction

esbuild executes your .css.ts files at build time. Only a tiny class mapper ships to the client — the styling engine never does.

Cascade-layer scoping

Hash-based isolation plus auto-bumped layers when you extend — predictable overrides, no specificity wars.

Drop styles in a *.css.ts sibling. The Salty plugin bakes them into real CSS at build time — nothing ships to the client.

button.css.ts
// components/button.css.ts
import { styled } from "@salty-css/react/styled";

export const Button = styled("button", {
  base: {
    padding: "0.75rem 1.25rem",
    borderRadius: "6px",
    background: "{theme.color}",
    color: "white",
  },
  variants: {
    tone: {
      primary: { background: "{theme.color}" },
      ghost: { background: "transparent", border: "1px solid currentColor" },
    },
  },
});

That’s the whole runtime. Really.

Where to next?

Quick Start

Zero to a styled component in five minutes.

Installation

Wire up the Vite or Webpack plugin.

Component styles

The full styled API and how it composes.

Variants

Prop-driven styles and compound variants.

Templates

Reusable style recipes with defineTemplates.