Counted Tabs

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

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}
/>

More Nav pieces

View all Nav

Tab Bar Pill

Four-tab navigation pill that expands the active tab to show its label, with a count badge on alerts.

Pill Tabs

Rounded segmented tabs riding a muted track, with a raised card sliding under the active label.

Underline Tabs

Horizontal tabs with a thin bottom rail and a primary underline under the active label.

Vertical Tabs

Sidebar-style stack of icon + label rows where the active row gets a muted fill and bolder text.

Pagination

Numbered pagination with prev/next chevrons, ellipsis truncation, and a filled primary active tile.

Icon Tabs

Segmented icon tabs inside a bordered tray, where the active tab flips to the foreground color.