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.

Badges often pair a small icon with a single word: a checkmark for active, a warning triangle for errors, a star for premium. shadcn/ui's Badge renders children without built-in spacing — dropping an icon next to text produces zero gap, so every usage site either wraps children in a flex container or adds a gap-1 utility manually.

Drivn's Badge uses inline-flex items-center gap-1.5 on its base container. Drop a lucide-react icon beside text and the gap applies automatically, with vertical centering and consistent spacing across every variant. No wrapper, no className gymnastics, no per-call-site gap class. Across a codebase with forty badge instances — status cells in tables, tier pills in pricing cards, counters in a notification tray — the built-in gap eliminates forty repeated fragments.

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.scss 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.