Filter chips with counters
Each chip carries a small count, and the number does a quick hop whenever it changes.
Settings
Code
<div class="uv-fcb"><button class="on">All<span class="b">12</span></button><button class="">Design<span class="b">34</span></button><button class="">Code<span class="b">7</span></button><button class="">Photos<span class="b">21</span></button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
Counts help people decide where to click. On a community forum you might show how many threads sit under General, Help, Showcase and Jobs; in a support inbox, how many tickets are open, pending or solved. The little hop draws the eye when a number updates, without shouting. Good for anyone searching for filter tabs with a badge count.
The numbers need to be real and current, or the whole idea backfires. If a category is empty, consider greying out the chip instead of hiding it. And keep counts under three digits where you can; “999+” is perfectly fine.