How to Add a Badge to a React App

The Badge assumes three things about your project. Tailwind CSS v4 must be processing your styles, because every visual decision in the component is a Tailwind class. TypeScript must be configured — the file ships as .tsx and the variant prop type is derived with keyof typeof, so TypeScript is a requirement of the stack, not a preference. And the @/ import alias must resolve to your source directory, since the component imports the cn helper from @/utils/cn. Projects created with create-next-app, npm create vite, or npx drivn@latest create satisfy all three out of the box; for a hand-rolled setup, the installation page lists the minimal tsconfig.json and token config. The five variants read the primary, secondary, success, and destructive color tokens, so confirm your theme defines them.

From your project root, run the CLI and let it write the component. It asks once where components live — src/components/ui/ by default — and drops badge.tsx there. Your package.json does not change: the Badge imports React and the local cn helper and nothing else, not even an icon package. That makes it one of the safest first components to adopt Drivn with — roughly thirty lines you can read top to bottom in a minute. The CLI docs cover flags for custom directories and adding several components in one command. After install the file is yours: upgrades never rewrite it, so commit the pristine version before customizing to keep a clean baseline.

Import Badge from your UI directory and pass one of five variant values: default, secondary, success, outline, or destructive. Each maps to a Tailwind string in the component's styles.variants object, and four of the five share one recipe — the token color at 15% opacity behind full-strength text, with a soft border of the same hue — while outline drops the tinted background for a quiet, metadata-style label. The prop is optional and falls back to default. Because the type is keyof typeof styles.variants, your editor autocompletes the five names and the compiler rejects a typo before anything renders. The full prop table lives in the Badge docs.

The children prop takes any React node, and the base styles already include inline-flex items-center gap-1.5, so an icon and a label align and space themselves with no extra classes at the call site. Render a lucide-react icon at around w-3 h-3 so it sits proportionally inside the text-xs pill, and keep the icon decorative — the text carries the meaning for screen readers. Counts need nothing special: a number is a valid child, and secondary is the conventional variant for neutral tallies like unread messages. For data-driven status columns, map each status string to a variant name in a small as const record and index into it at render time — the derived prop type checks every entry.

Everything visual lives in the styles object at the top of badge.tsx, so extending the Badge is a string edit in a file you own. The base entry holds the pill shape — inline flex, px-2.5 py-0.5 padding, rounded-full — and variants holds the five color recipes. To add a warning variant, insert one more key following the same opacity pattern with your warning token; the variant prop type updates itself because it is derived from the object, and every call site autocompletes the new name immediately. To reshape all badges at once — square corners, larger text — edit base. A rebrand through the theming page recolors every variant without touching this file, since the recipes read tokens, not hex values.