emotion-variantsType-safe variant API for Emotion

Compose component styles with multiple variants — no repetitive css() calls.

Get Started

View on GitHub

🎯

Type-safe

Full TypeScript inference for variant keys, values, and compound combinations. No casts, no `any`.

🎨

Compound variants

Apply specific styles only when multiple variants match — like `large` + `primary`.

📦

Default variants

Set sensible defaults so consumers can omit props and still get a styled component.

🚀

Pre-serialized styles

Base styles are serialized once at definition time. Each call just selects the matching styles for Emotion's `css` prop.

🪶

Drop-in for Emotion

Works with `@emotion/react`'s `css` prop. No bundler config, no providers.

🔍

classNames access

Read generated class names directly when integrating with non-React contexts or testing.

tsx

import { ev } from 'emotion-variants';

const button = ev({
  base: {
    padding: '10px 20px',
    borderRadius: '8px',
    cursor: 'pointer',
  },
  variants: {
    size: {
      small: {
        fontSize: '12px',
      },
      large: {
        fontSize: '16px',
      },
    },
    color: {
      primary: {
        background: '#d36ac2',
        color: 'white',
      },
      secondary: {
        background: '#6c757d',
        color: 'white',
      },
    },
  },
  defaultVariants: {
    size: 'small',
    color: 'primary',
  },
});

type ButtonProps = NonNullable<Parameters<typeof button>[0]> & {
  children: React.ReactNode;
};

function Button({ size, color, children }: ButtonProps) {
  return <button css={button({ size, color })}>{children}</button>;
}