ns-ui
Unread badge that tarnishes like brass: solid when fresh, an outline within a day, a muted ring after a week — new activity instantly re-polishes it with a small flare.
Use when an unread pip that encodes staleness, not just quantity — fill drops to an outline within a day and settles into a muted ring after a week, so a count from a minute ago and the same count from a month ago look different at rest with zero motion required; pick this over a plain count badge whenever a nav item's age matters as much as its total.
Install
npx shadcn add https://design.helpmarq.comns-ui / badge-unread-tarnish
Same shape, three different ages: a solid pip is fresh, a thin ring is a week gone quiet — no need to wait and watch to tell them apart.
fill, ring weight and text tone move together — never color alone
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | — | unread item count. Incidental to the component's point — see newestTimestamp. |
| newestTimestamp | number | Date | — | timestamp of the newest unread item; the sole driver of the tarnish stage. |
| id? | string | — | id placed on the pip itself, e.g. so a nav item can aria-describedby it. Defaults to an internal useId. |
| className? | string | — | — |