API reference

sxv(config)

Creates a typed recipe. The call is transformed at build time by the Babel plugin into static StyleX styles.

Configuration

Property	Required	Description
base	No	Style applied to every recipe call.
variants	No	Named groups and their possible values.
defaultVariants	No	Values used when a prop is omitted.
compoundVariants	No	Extra styles activated by matching multiple values.
slots	No	Named style maps for multi-element components.
compoundSlots	No	Conditional styles applied to one or more slots.

All style objects must be static StyleX-compatible objects. See limitations for unsupported dynamic patterns.

Call-site overrides

Every recipe and slot accepts className and style in addition to its variant props. Generated StyleX props are merged with these values at the call site:

button({
  tone: "primary",
  className: "custom-button",
  style: { boxShadow: "0 0 0 2px blue" },
});

For slots, pass overrides to the individual slot function:

const cardStyles = card({ tone: "accent" });
cardStyles.title({ className: "custom-title" });

See overriding, extend, and slots for complete examples.

VariantProps<typeof recipe>

Extracts the variant props accepted by a recipe for use in component APIs:

type ButtonProps = VariantProps<typeof button> & {
  children: React.ReactNode;
};

The extracted type includes className and style, which are merged with the StyleX result when supplied.

Return value

Calling a recipe returns the object produced by stylex.props. It can be spread directly on an element:

<button {...button({ tone: "primary" })}>Save</button>