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 { Nav11 } from "@/components/beste/piece/nav11";
<Nav11
tabs={[
{
"label": "Inbox",
"count": 12
},
{
"label": "Assigned",
"count": 4
},
{
"label": "Mentions"
},
{
"label": "Archive"
}
]}
activeIndex={0}
/>Four-tab navigation pill that expands the active tab to show its label, with a count badge on alerts.
Rounded segmented tabs riding a muted track, with a raised card sliding under the active label.
Horizontal tabs with a thin bottom rail and a primary underline under the active label.
Sidebar-style stack of icon + label rows where the active row gets a muted fill and bolder text.
Numbered pagination with prev/next chevrons, ellipsis truncation, and a filled primary active tile.
Classic folder-style tabs that sit on a rail, with the active tab bordered and notched into the panel.