With avatar
flx/badge-09FreeBlock
Assignee chip with a leading avatar inside the badge.
Install it
npx shadcn@latest add https://ui.flexnative.com/r/badge-09.jsonSource
1import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'2import { Badge } from '@/components/ui/badge'34export function Badge09() {5 return (6 <Badge variant="secondary" className="h-6 gap-1.5 pl-0.5">7 <Avatar className="size-5">8 <AvatarImage9 src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop"10 alt="Sofia Rodrigues"11 />12 <AvatarFallback>SR</AvatarFallback>13 </Avatar>14 Sofia Rodrigues15 </Badge>16 )17}
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 |
