Slots

Use slots when a component has multiple elements that need independent StyleX styles. Each slot returns the same className and style props as a regular recipe.

const card = sxv({
  slots: {
    root: { display: "flex", flexDirection: "column" },
    title: { fontSize: 18, fontWeight: 700 },
  },
  variants: {
    tone: {
      neutral: { root: { backgroundColor: "#fff" } },
      accent: { root: { backgroundColor: "#eff6ff" } },
    },
  },
  defaultVariants: { tone: "neutral" },
  compoundSlots: [
    {
      tone: "accent",
      slots: { root: { borderWidth: 2 } },
    },
  ],
});

const styles = card();
<article {...styles.root()}>
  <h2 {...styles.title({ className: "custom-title" })}>Title</h2>
</article>;

Slots are static StyleX recipes. The compiler creates one StyleX style map per slot and merges optional className and style overrides at the call site.

Variant styles are declared as slot maps. compoundSlots uses the same variant conditions as a regular compound variant, but applies its styles only to the named slots. When a condition is not satisfied, its slot styles are omitted.

Compound slots

Use compoundSlots when a combination of variants should change more than one slot at the same time. Each entry contains the variant conditions and a slots object with the styles to apply to the matching slots.

const alert = sxv({
  slots: {
    root: { display: "flex" },
    icon: { width: 16, height: 16 },
    message: { fontSize: 14 },
  },
  variants: {
    status: {
      info: {
        root: { backgroundColor: "#eff6ff" },
        icon: { color: "#2563eb" },
      },
      danger: {
        root: { backgroundColor: "#fef2f2" },
        icon: { color: "#dc2626" },
      },
    },
    emphasis: {
      normal: { message: { fontWeight: 400 } },
      strong: { message: { fontWeight: 700 } },
    },
  },
  defaultVariants: {
    status: "info",
    emphasis: "normal",
  },
  compoundSlots: [
    {
      status: "danger",
      emphasis: "strong",
      slots: {
        root: { borderWidth: 2, borderColor: "#dc2626" },
        message: { fontWeight: 800 },
      },
    },
  ],
});

The compound styles are applied only when every condition matches. Omitted variant props use defaultVariants while evaluating the conditions. A className or style passed to an individual slot is merged after the generated StyleX props for that slot.