PaginationAdvanced

Full pagination with page numbers, ellipsis, prev/next arrows, per-page select dropdown, and results text.

Navigation & Layoutpaginationtabledatanavigation

Dependencies

shadcn/ui components needed:

npx shadcn@latest add paginationnpx shadcn@latest add selectnpx shadcn@latest add button

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { ChevronLeft, ChevronRight } from 'lucide-react';
4import { Button } from '@/components/ui/button';
5import {
6  Pagination,
7  PaginationContent,
8  PaginationEllipsis,
9  PaginationItem,
10  PaginationLink,
11  PaginationNext,
12  PaginationPrevious,
13} from '@/components/ui/pagination';
14import {
15  Select,
16  SelectContent,
17  SelectItem,
18  SelectTrigger,
19  SelectValue,
20} from '@/components/ui/select';
21
22export default function PaginationAdvanced() {
23  return (
24    <div className="w-full max-w-4xl mx-auto p-6 bg-white dark:bg-slate-950 rounded-xl border border-slate-200 dark:border-slate-800">
25      <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
26        <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
27          <span>Showing</span>
28          <span className="font-semibold text-slate-900 dark:text-white">1-10</span>
29          <span>of</span>
30          <span className="font-semibold text-slate-900 dark:text-white">248</span>
31          <span>results</span>
32        </div>
33        
34        <div className="flex items-center gap-4">
35          <div className="flex items-center gap-2">
36            <span className="text-sm text-slate-600 dark:text-slate-400">Rows per page:</span>
37            <Select defaultValue="10">
38              <SelectTrigger className="w-[70px] h-8">
39                <SelectValue />
40              </SelectTrigger>
41              <SelectContent>
42                <SelectItem value="10">10</SelectItem>
43                <SelectItem value="25">25</SelectItem>
44                <SelectItem value="50">50</SelectItem>
45                <SelectItem value="100">100</SelectItem>
46              </SelectContent>
47            </Select>
48          </div>
49          
50          <Pagination>
51            <PaginationContent>
52              <PaginationItem>
53                <PaginationPrevious className="h-8 px-3" />
54              </PaginationItem>
55              <PaginationItem>
56                <PaginationLink href="#" isActive className="h-8 w-8">1</PaginationLink>
57              </PaginationItem>
58              <PaginationItem>
59                <PaginationLink href="#" className="h-8 w-8">2</PaginationLink>
60              </PaginationItem>
61              <PaginationItem>
62                <PaginationLink href="#" className="h-8 w-8">3</PaginationLink>
63              </PaginationItem>
64              <PaginationItem>
65                <PaginationEllipsis className="h-8 w-8" />
66              </PaginationItem>
67              <PaginationItem>
68                <PaginationLink href="#" className="h-8 w-8">10</PaginationLink>
69              </PaginationItem>
70              <PaginationItem>
71                <PaginationNext className="h-8 px-3" />
72              </PaginationItem>
73            </PaginationContent>
74          </Pagination>
75        </div>
76      </div>
77    </div>
78  );
79}