Counted Tabs

Underline tabs that print a pill count next to the label, with the active count filled in primary.

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

Import & use

import { Nav11 } from "@/components/beste/piece/nav11";

<Nav11
  tabs={[
    {
      "label": "Inbox",
      "count": 12
    },
    {
      "label": "Assigned",
      "count": 4
    },
    {
      "label": "Mentions"
    },
    {
      "label": "Archive"
    }
  ]}
  activeIndex={0}
/>