KQ-935 · BADGE/COUNT

Badge Count

An app badge that behaves like one. The tile draws a procedural mark hashed from its own name, and an arrival bumps the pill from 1.25 back to 1 on recoil while the digits roll in strips of ten and a ResizeObserver-measured width joins on glide, so gaining a place widens the badge rather than jumping it. A count that falls never bumps, past max the strips hold at the cap and a plus arrives from distances.nudge on snap, and reading everything collapses the badge on the exit ease.

KQ-935 · BADGE/COUNT

3 unread · threads 3 · pay 0

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/badge-count

Props

app: string; default —; The app's name: seeds the mark, captions the tile, and names the button.
count: number; default 0; Unread items. Zero collapses the badge.
max: number; default 99; Cap; anything above reads as 99+.
noun: string; default "unread message"; Pluralised into the spoken sentences.
tone: "signal" | "danger" | "neutral"; default "signal"; The badge's ink.
onOpen: () => void; default —; Fires from the press; clear the count in the host.
onAnnounce: (sentence: string) => void; default —; The frozen sentence the polite region just spoke.

Prop	Type	Default	Description
app	string	—	The app's name: seeds the mark, captions the tile, and names the button.
count	number	0	Unread items. Zero collapses the badge.
max	number	99	Cap; anything above reads as 99+.
noun	string	"unread message"	Pluralised into the spoken sentences.
tone	"signal" \| "danger" \| "neutral"	"signal"	The badge's ink.
onOpen	() => void	—	Fires from the press; clear the count in the host.
onAnnounce	(sentence: string) => void	—	The frozen sentence the polite region just spoke.