StyleX Variants

Typed, compile-time variants for StyleX, inspired by Tailwind Variants.

StyleX Variants lets you define base styles, named variants, defaults and compound variants while keeping the selected props type-safe.

What is included?

• Static StyleX styles compiled by Babel.
• Type-safe variant selections with TypeScript.
• Boolean variants and compound variants.
• Merging of generated props with className and style.

Next steps

• Compare StyleX and StyleX Variants
• Install and configure the library
• Define variants
• Use compound variants
• Read the current limitations

Try it locally

The repository includes a Vite playground with working examples for recipes, boolean and compound variants, extend, overrides, slots, and compoundSlots.

pnpm install
pnpm dev:playground

You can also open the playground source on GitHub to see the complete examples.