# Expiring Badge – Status Badge with a Time Rim that Empties and Morphs to Expired

> Expiring Badge for React and Tailwind CSS (shadcn/ui): a status badge whose rim shows the share of time left and empties as time passes, turns amber, then red, and morphs its label to Expired. It is built to show how long a trial, offer or code has left. Pass expiresAt with startedAt or duration; the label can be a function of the time left, live mode rolls its digits each second, onExpire fires once, now() is injectable. Focusable with a tooltip, polite expiry announcement, reduced motion, light and dark. Use it for trials, sales, New labels, codes and sessions. The included demo shows five badges on an account card and makes no requests. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Badge, Status, Countdown, Timer, Chip
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/expiring-badge

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/expiring-badge?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/badge.md