This whole registry and philosophy is available as a Claude Code Agent Skill — install it and Claude builds UI with it directly.

Badge

$ npx @dhruvchoudhary/dsgn add badge

Badge with variant props via class-variance-authority.

Badge

Variant

Label

<Badge variant="accent">Badge</Badge>

All variants

primarysecondaryaccentoutlinedestructive