Pagination Component Test
Testing pagination with various patterns
Basic Pagination (Relume Example)
With Active State
Simple (No Ellipsis)
With Multiple Ellipsis
First Page
Last Page
Compact (Icon Only)
Implementation Notes
- ✅ Tabler icons (IconChevronLeft, IconChevronRight, IconDots)
- ✅ Semicolons for consistency
- ✅ Shadcn's isActive prop (outline variant) better than Relume's underline approach
- ✅ Shadcn's ghost/outline variants better than Relume's link/secondary
- ✅ Proper aria-current for active page
- ✅ Flexible sizing (default, icon)
- ✅ Disabled state via className (pointer-events-none opacity-50)
- ✅ Works with Next.js Link via href prop