All components
Nav Tabs Count
NavigationUnderline tabs with counts; the underline glides on click.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/nav-tabs-count.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/nav-tabs-count.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | { label: string; count?: number }[] | - | Tabs to render; count is optional per tab. |
| active | number | 0 | Initially active index. |
| onChange | (index: number) => void | - | Called with the new index on selection. |
Accessibility
- role=tablist / role=tab with aria-selected on the active tab.
- Labels are text, so tabs remain identifiable without the count badge.
- The active tab changes colour as well as gaining the underline.
Dependencies
motionclsxtailwind-merge