All components
Icon Tabs
NavigationIcon-only tab bar where the raised tab slides to your pick.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/icon-tabs.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/icon-tabs.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | { icon: ReactNode; label: string }[] | - | Tabs to render, in order. |
| active | number | 0 | Initially active index. |
| onChange | (index: number) => void | - | Called with the new index on selection. |
Accessibility
- Uses role=tablist / role=tab with aria-selected on the active tab.
- Every icon-only button carries an aria-label, so the tab is announced.
- The sliding highlight uses layoutId, so it animates without a re-render of the labels.
Dependencies
motionclsxtailwind-mergelucide-react