Components
Loading preview...
Filter Badge inspired by Tremor
npx shadcn@latest add https://21st.dev/r/serafimcloud/filter-badgeimport { FilterBadge } from "@/components/ui/filter-badge"
export function FilterBadgeAvatar() {
return (
<div className="flex flex-wrap justify-center gap-4">
<FilterBadge
variant="avatar"
avatar="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=1887&auto=format&fit=facearea&&facepad=2&w=256&h=256"
onRemove={() => {}}
>
John Doe
</FilterBadge>
<FilterBadge
variant="avatar"
avatar="https://images.unsplash.com/photo-1619895862022-09114b41f16f?q=80&w=1887&auto=format&fit=facearea&&facepad=2&w=256&h=256"
onRemove={() => {}}
>
Emily Smith
</FilterBadge>
<FilterBadge
variant="avatar"
avatar="https://images.unsplash.com/photo-1569128782402-d1ec3d0c1b1b?q=80&w=1887&auto=format&fit=facearea&&facepad=2&w=256&h=256"
onRemove={() => {}}
>
Max Bosh
</FilterBadge>
<FilterBadge
variant="avatar"
avatar="https://images.unsplash.com/photo-1566761284295-af58908238bb?q=80&w=1887&auto=format&fit=facearea&&facepad=2&w=256&h=256"
onRemove={() => {}}
>
Mike Kingston
</FilterBadge>
</div>
)
}