# StatusBadge – Beautiful, Accessible Status Indicators

> “Give your app instant clarity with plug-and-play status indicators. The StatusBadge component comes with six built-in states (success, error, warning, info, pending, default), sleek monochrome design, and WCAG-ready accessibility. Fully responsive, dark-mode friendly, and customizable out of the box — perfect for dashboards, system monitors, or anywhere status matters.”  ⚡ Why this works:  “Beautiful” + “Accessible” → hits design + inclusivity pain points.  Calls out React + shadcn/ui → instantly attracts the right audience.  Highlights features upfront: 6 states, dark mode, responsive, WCAG-ready.  Shows use cases → dashboards, monitors, state labels.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@uniquesonu/components/status-badge-beautiful-accessible-status-indicators

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/status-badge-beautiful-accessible-status-indicators?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