CVA variant builder

Write variants as one line each and get the cva() call, the defaults and the VariantProps type, in the shape shadcn components use.

txt
CVAts
The result appears here
Made something you like?See it in real components

Questions

What is the input format?+

One rule per line. base: for the classes every instance carries, then group: option = classes for each variant, and default: group=option for the defaults. Anything else on its own line is treated as more base classes.

Why CVA rather than a switch?+

Because the variants become a type. VariantProps reads the object back out, so the component's props are exactly the options you defined and a typo is a compile error rather than a missing class.

How does this interact with cn()?+

CVA composes the classes, cn() resolves the conflicts when a caller passes their own. The usual shape is cn(buttonVariants({ variant, size }), className), and the merge playground shows what that does.

Related tools

Tailwind class merge playgroundSee exactly what cn() keeps and what it throws away when a caller's className meets a component's own classes, with the losing classes listed.shadcn registry.json builderFill in a form and get a valid registry item and registry.json, with the file types inferred and the rules the shadcn CLI enforces checked as you type.CSS to TailwindTurn CSS declarations into Tailwind v4 utilities, with the spacing scale worked out and arbitrary values where there is no named class.

The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

Browse the blocks

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version