vibecodng.com

Free MCP betaIndex and tools live

Measured entry

kibo-pill

badgeminimal-flat

A source-distributed React pill family for labels, status dots, deltas, avatars, icon actions, and grouped faces. It arrives through a shadcn registry and composes the local Avatar, Badge, and Button primitives, the shared cn helper, Tailwind classes, and Lucide icons rather than shipping as a standalone package.

Specimen
Harness screenshot of kibo-pill at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of kibo-pill at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of kibo-pill 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 kibo-pill
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical1
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal35.8 KB (101.3 KB build, 65.5 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 1.10s
error during build:
[vite]: Rollup failed to resolve import "class-variance-authority" from "<sandbox>re-81e966ac0927/src/components/ui/badge.tsx".

Verdict

A useful, editable pill toolkit for an existing shadcn codebase, with broad variants and a clean compositional API. It needs a shadcn-style setup, and adoption should include responsive wrapper fixes plus explicit avatar alternative text before release.

Use it if

  • Your app already uses shadcn primitives and needs one consistent API for status, identity, trend, and action pills.
  • You want source code that can be restyled locally instead of a fixed third-party package.
  • Your team can supply meaningful alternative text for avatar images and test each composition with real content.

Skip it if

  • You need a drop-in component for plain React without shadcn registry primitives, path aliases, or Tailwind utilities.
  • Your narrow layouts cannot accommodate or adapt the provided fixed-width demo composition, which overflowed in the compact viewport.
  • You cannot audit avatar usage for alternative text; the tested demo exposed a critical image accessibility failure.
  • You only need a basic text badge and do not want the added icon, avatar, button, and primitive dependency surface.

Install

Installation record for kibo-pill
Declared dependencieslucide-react, radix-ui, clsx, tailwind-merge
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 Tailwind and the cn utility, install Lucide React plus the Radix-backed Avatar and Button requirements, and recreate compatible Avatar, Badge, and Button primitives. Include class-variance-authority for the Badge implementation, configure the source path alias, and ensure image props provide alternative text.

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/shadcnblocks/kibo
License
MIT
Record published
2026-08-17

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.