Trend delta
flx/badge-11FreeBlock
Up and down arrows with tinted gain / loss percentages.
Install it
npx shadcn@latest add https://ui.flexnative.com/r/badge-11.jsonSource
1import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react'23import { Badge } from '@/components/ui/badge'45export function Badge11() {6 return (7 <div className="flex flex-wrap items-center gap-2">8 <Badge className="border-transparent bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">9 <ArrowUpIcon data-icon="inline-start" />10 12.5%11 </Badge>12 <Badge className="border-transparent bg-red-500/10 text-red-600 dark:text-red-400">13 <ArrowDownIcon data-icon="inline-start" />14 3.2%15 </Badge>16 </div>17 )18}
What it pulls in
Other registry items
Files it writes
More from flx
All 450 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 |
