Drivn vs shadcn/ui — Badge Component Compared

shadcn/ui's Badge is a single named export paired with a badgeVariants helper powered by class-variance-authority. You import Badge (and optionally badgeVariants when other components want the same class set), pass a variant prop, and the component applies a cva-generated className. Drivn's Badge is also a single export — just Badge — but the variants live in a plain object literal and the component body is a one-line render.

Both libraries accept variant, className, and children. Both render inline by default. The difference is what ships alongside — shadcn's cva and clsx runtime versus Drivn's zero-dependency path that relies only on React, Tailwind, and the local cn() utility. Migrating a shadcn codebase to Drivn usually means keeping every call site unchanged and deleting two dependency entries from package.json.

shadcn/ui's Badge defines four variants: default, secondary, destructive, and outline. A success state — the green pill that signals plan active, invite accepted, or deployment healthy — is a near-universal UI need, but shadcn leaves you to add it as a cva entry, which means editing badgeVariants and threading the new key through TypeScript.

Drivn ships success as a first-class variant. The Badge component's styles.variants.success references the --color-success design token, so the success badge matches your app's global success color without any hardcoded hex. The other four variants (default, secondary, outline, destructive) line up one-to-one with shadcn, so mental migration is direct: variant="destructive" in shadcn becomes variant="destructive" in Drivn.

A badge rarely appears alone — it pairs with a glyph: a check for active, a triangle for failed, a star for premium. shadcn/ui's Badge passes children straight through to its container with no built-in gap, so an icon placed next to text sits flush against it. Every call site compensates on its own, with a wrapper element or a gap-1 utility, and those one-off fragments drift apart as the codebase grows.

Drivn puts inline-flex items-center gap-1.5 directly in the Badge base class, alongside px-2.5 py-0.5 text-xs font-semibold rounded-full. That single declaration covers horizontal spacing and vertical centering for every variant, so a lucide-react icon becomes a plain child — no wrapper, no per-instance class. Size the icon to w-3 h-3 so it reads correctly against the text-xs label. In a table with forty status cells, that is forty places you never think about alignment, and forty places that stay identical when the badge padding changes later.

Both libraries put the Badge file in your project, so both invite the same category of edits. The shape of those edits differs. shadcn uses cva — to add a variant you extend badgeVariants with another key under variants.variant, and the TypeScript union updates through cva's generic inference.

Drivn uses a plain record: styles.variants is a string-keyed object, the variant prop type is keyof typeof styles.variants, and adding a variant is a one-line addition to the object. TypeScript picks it up immediately. No cva call, no generic dance, no extra import.

For design tokens, Drivn's variant strings reference CSS custom properties — bg-primary/15, text-success, border-destructive/20 — so a rebrand flows through the theming layer without touching any call sites. Changing --color-success in globals.css updates every success badge in the app at once. The installation page covers how tokens are wired.

Drivn's Badge does not expose an asChild prop or a Slot primitive. shadcn's Badge (in current releases) wraps its content in @radix-ui/react-slot, so asChild lets the Badge inherit any child element's tag — convenient when you want the badge to render as a link (<a>) while keeping the badge styling. Drivn's Badge is always a <span>. To make a clickable badge, wrap it in a <Link>, a button, or a native anchor at the call site.

The badgeVariants helper shadcn exports is also missing from Drivn. In shadcn projects you sometimes apply badge styling to non-badge elements by calling badgeVariants() for the className string. Drivn's styles object is internal to the component file. If you want that class set elsewhere, either export it explicitly or duplicate the string.

Outside those two gaps, Drivn's Badge is a functional superset of shadcn's: one extra variant, automatic icon spacing, fewer dependencies, and a shorter source file to read end-to-end.