Status colors
flx/badge-05FreeBlock
Tinted success, warning, error, and info states.
Install it
npx shadcn@latest add https://ui.flexnative.com/r/badge-05.jsonSource
1import { Badge } from '@/components/ui/badge'23export function Badge05() {4 return (5 <div className="flex flex-wrap items-center gap-2">6 <Badge className="border-transparent bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">7 Success8 </Badge>9 <Badge className="border-transparent bg-amber-500/10 text-amber-600 dark:text-amber-400">10 Warning11 </Badge>12 <Badge className="border-transparent bg-red-500/10 text-red-600 dark:text-red-400">13 Error14 </Badge>15 <Badge className="border-transparent bg-blue-500/10 text-blue-600 dark:text-blue-400">16 Info17 </Badge>18 </div>19 )20}
What it pulls in
Other registry items
Files it writes
More from flx
All 446 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Basicaccordion-01 | flx | Blocks | Free | no deps | |
| Multipleaccordion-02 | flx | Blocks | Free | no deps | |
| With iconsaccordion-03 | flx | Blocks | Free | no deps | |
| FAQaccordion-04 | flx | Blocks | Free | no deps | |
| Separated cardsaccordion-05 | flx | Blocks | Free | no deps | |
| Plus / minus iconaccordion-06 | flx | Blocks | Free | 1 dep | |
| Left chevronaccordion-07 | flx | Blocks | Free | 1 dep | |
| Rich contentaccordion-09 | flx | Blocks | Free | no deps |
