Filter Pills

Row of filter chips with optional count numbers. Active chip inverts to foreground.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Toolbar16 } from "@/components/beste/piece/toolbar16";

<Toolbar16
  filters={[
    {
      "label": "All",
      "count": 42
    },
    {
      "label": "Active",
      "count": 18
    },
    {
      "label": "Completed",
      "count": 22
    },
    {
      "label": "Archived",
      "count": 2
    }
  ]}
  active="Active"
/>