Badge
bundui/badge-indicatorFreeComponent
Displays a badge or status indicator.
Live preview
live · rendered by the registry
Rendered by bundui on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://bundui.io/r/badge-indicator.jsonSource
1import { Badge } from "@/components/ui/badge";23export default function BadgeIndicator() {4 return (5 <div className="flex items-center justify-center gap-2">6 <Badge variant="outline">7 <span className="me-0.5 size-2 rounded-full bg-green-500" />8 Success9 </Badge>10 <Badge variant="outline">11 <span className="me-0.5 size-2 rounded-full bg-indigo-500" />12 Info13 </Badge>14 <Badge variant="outline">15 <span className="bg-destructive me-0.5 size-2 rounded-full" />16 Destructive17 </Badge>18 </div>19 );20}
What it pulls in
Other registry items
Files it writes
More from bundui
All 217 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion-collapsible | bundui | Components | Free | no deps · 2 files | |
| Accordionaccordion-default | bundui | Components | Free | no deps | |
| Accordionaccordion-with-plus-icon | bundui | Components | Free | 2 deps | |
| Alertalert-danger | bundui | Components | Free | 1 dep | |
| Alertalert-default | bundui | Components | Free | no deps | |
| Alert Dialogalert-dialog | bundui | Components | Free | no deps | |
| Alertalert-success | bundui | Components | Free | 1 dep | |
| Alertalert-warning | bundui | Components | Free | 1 dep |
