Filter Badge

Component 51

About

Filter Badge inspired by Tremor

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Filter Badge to your project and fits it to your theme.

Code

How Filter Badge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FilterBadge } from "@/components/ui/filter-badge"

export function FilterBadgeAvatar() {
  return (
    <div className="flex flex-wrap justify-center gap-4">
      <FilterBadge 
        variant="avatar"
        avatar="https://cdn.21st.dev/assets/mirror/2f/2f362d1d2e94b454b69606daed893943d9111670f743b12875bbb604fc7f3df7.jpg"
        onRemove={() => {}}
      >
        John Doe
      </FilterBadge>
      <FilterBadge 
        variant="avatar"
        avatar="https://cdn.21st.dev/assets/mirror/eb/eb062c75c84f850bb2a147e506650b65837ccea9c05786e1c48c0afd324065e5.jpg"
        onRemove={() => {}}
      >
        Emily Smith
      </FilterBadge>
      <FilterBadge 
        variant="avatar"
        avatar="https://cdn.21st.dev/assets/mirror/fe/fe57be9ce0eecde67e59c496235f7ea9aa61001fa6ef62251319ca7d1345a7e4.jpg"
        onRemove={() => {}}
      >
        Max Bosh
      </FilterBadge>
      <FilterBadge 
        variant="avatar"
        avatar="https://cdn.21st.dev/assets/mirror/e1/e113d5625c7f2f691b2370c0649d5e74c3d0746bc5e89a78c795c8b230243d82.jpg"
        onRemove={() => {}}
      >
        Mike Kingston
      </FilterBadge>
    </div>
  )
}