vibecodng.com

Free MCP betaIndex and tools live

Measured entry

shadcn-badge

badgeunclassified

A copy-in React and TypeScript badge primitive built from Tailwind utility classes. It renders a span by default, can delegate rendering through the Radix Slot, and exposes style variants through class-variance-authority. It also expects the shadcn cn helper and theme tokens.

Specimen
Harness screenshot of shadcn-badge at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of shadcn-badge at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of shadcn-badge at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for shadcn-badge
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal14.2 KB (78.8 KB build, 64.6 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 954ms
error during build:
[vite]: Rollup failed to resolve import "class-variance-authority" from "<sandbox>/src/cut/components/ui/badge.tsx".

Verdict

A solid, compact choice inside a shadcn codebase, with useful variants and flexible child rendering. It builds and mounts in the configured harness, but the bare project fails, so it needs a shadcn-style setup before it is usable.

Use it if

  • You need compact status, category, or metadata labels that follow an existing shadcn theme.
  • You want selectable visual variants and the option to render a link or other child element through Radix Slot.
  • Your team prefers source-owned components that can be adjusted locally instead of a packaged black box.

Skip it if

  • Your project does not use Tailwind utilities or shadcn theme tokens and you do not want to recreate that styling layer.
  • You need a standalone package that works without copied helpers and supporting dependencies.
  • You need interactive selection, dismissal, or notification behavior rather than a small presentational label.

Install

Installation record for shadcn-badge
Declared dependenciesradix-ui
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add radix-ui and class-variance-authority, provide the cn class-merging helper, configure Tailwind, and define the referenced theme colors, border, focus-ring, dark-mode, and state utilities. Preserve the path alias or replace that import with a local relative path.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/shadcn-ui/ui
License
MIT
Record published
2026-08-12

Alternatives

Other published entries for the badge pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.