All components
Dot Pagination
NavigationDot pagination where the active dot stretches into a pill.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/dot-pagination.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/dot-pagination.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 4 | Number of pages. |
| active | number | 0 | Initially active index. |
| onChange | (index: number) => void | - | Called with the new index. |
Accessibility
- aria-current marks the active page; each dot has an aria-label.
- The active dot changes width as well as colour.
- Real buttons, so the control is keyboard reachable.
Dependencies
motionclsxtailwind-merge