@gentleduck/variants

Typed variants for your components

A cva() variant system with compound variants, defaults, and a VariantProps helper. Every type comes from your config.

Inferred types
Every variant, default, and compound is inferred. VariantProps<typeof button> gives you the union of valid props.
Variant-driven styles
Define variants once and reuse them everywhere: intent, size, tone, or whatever your design system needs.
Default variants
Set defaults so consumers rarely spell them out, and override them per instance when needed.
Compound variants
Add classes when several variants match, like primary with lg, or outline with destructive.
Zero dependencies
Works with Tailwind but doesn’t need it. Use it with any className-based styling.
cva-compatible
Same API as class-variance-authority. Migrate an existing codebase by changing the import.

Install

Write your variants and export their types.

import { cva, type VariantProps } from '@gentleduck/variants'

gentleduck is MIT licensed and will always be free and open source. Every package ships with full source access — fork it, modify it, own it.