Pagination

Use pagination for large lists (search results, products, articles) where showing everything would be overwhelming or slow. It's essential for SEO (individual page URLs), performance (loading smaller chunks), and user experience (manageable content portions).

Show 5-7 page numbers at once: current page, 2-3 before, 2-3 after. Use ellipsis (...) for gaps when there are many pages. Always include first/last page and previous/next buttons for complete navigation control.

Infinite scroll works well for social feeds where users browse casually, but pagination is better when users need to find specific items, return to previous results, or navigate to arbitrary pages. Use pagination for search and catalogs.

Yes! Display "Showing 1-20 of 500 results" to give users context about dataset size and their progress. This helps users decide whether to refine filters or continue browsing, improving overall search experience.

Yes, when properly implemented. Use semantic nav element, mark current page with aria-current, provide descriptive labels for screen readers, and ensure all controls work with keyboard navigation for full accessibility.

Yes, this Figma Pagination component matches the shadcn/ui implementation exactly, ensuring your pagination controls work consistently from design to production with proper navigation and accessibility features.