Loading...
Loading...
> Navigation for paginated content with numbered pages and next/previous controls.
1import {2 Pagination,3 PaginationContent,4 PaginationItem,5 PaginationLink,6 PaginationNext,7 PaginationPrevious,8} from "@/components/ui/pagination"
1import {2 Pagination,3 PaginationContent,4 PaginationItem,5 PaginationLink,6 PaginationNext,7 PaginationPrevious,8} from "@/components/ui/pagination";910<Pagination>11 <PaginationContent>12 <PaginationItem>13 <PaginationPrevious href="#" />14 </PaginationItem>15 <PaginationItem>16 <PaginationLink href="#" isActive>1</PaginationLink>17 </PaginationItem>18 <PaginationItem>19 <PaginationLink href="#">2</PaginationLink>20 </PaginationItem>21 <PaginationItem>22 <PaginationLink href="#">3</PaginationLink>23 </PaginationItem>24 <PaginationItem>25 <PaginationNext href="#" />26 </PaginationItem>27 </PaginationContent>28</Pagination>
1<Pagination>2 <PaginationContent>3 <PaginationItem>4 <PaginationPrevious href="#" />5 </PaginationItem>6 <PaginationItem>7 <PaginationLink href="#">1</PaginationLink>8 </PaginationItem>9 <PaginationItem>10 <PaginationLink href="#" isActive>2</PaginationLink>11 </PaginationItem>12 <PaginationItem>13 <PaginationLink href="#">3</PaginationLink>14 </PaginationItem>15 <PaginationItem>16 <PaginationEllipsis />17 </PaginationItem>18 <PaginationItem>19 <PaginationLink href="#">10</PaginationLink>20 </PaginationItem>21 <PaginationItem>22 <PaginationNext href="#" />23 </PaginationItem>24 </PaginationContent>25</Pagination>
1import { PaginationFirst, PaginationLast } from "@/components/ui/pagination";23<Pagination>4 <PaginationContent>5 <PaginationItem>6 <PaginationFirst href="#" />7 </PaginationItem>8 <PaginationItem>9 <PaginationPrevious href="#" />10 </PaginationItem>11 <PaginationItem>12 <PaginationLink href="#">1</PaginationLink>13 </PaginationItem>14 <PaginationItem>15 <PaginationLink href="#" isActive>2</PaginationLink>16 </PaginationItem>17 <PaginationItem>18 <PaginationLink href="#">3</PaginationLink>19 </PaginationItem>20 <PaginationItem>21 <PaginationNext href="#" />22 </PaginationItem>23 <PaginationItem>24 <PaginationLast href="#" />25 </PaginationItem>26 </PaginationContent>27</Pagination>
1<Pagination>2 <PaginationContent>3 <PaginationItem>4 <PaginationPrevious href="#" />5 </PaginationItem>6 <PaginationItem>7 <span className="text-sm text-muted-foreground px-4">8 Page 2 of 109 </span>10 </PaginationItem>11 <PaginationItem>12 <PaginationNext href="#" />13 </PaginationItem>14 </PaginationContent>15</Pagination>
1<Pagination>2 <PaginationContent>3 <PaginationItem>4 <PaginationLink href="#" size="icon" aria-label="Page 1">5 16 </PaginationLink>7 </PaginationItem>8 <PaginationItem>9 <PaginationLink href="#" size="icon" isActive aria-label="Page 2, current page">10 211 </PaginationLink>12 </PaginationItem>13 <PaginationItem>14 <PaginationLink href="#" size="icon" aria-label="Page 3">15 316 </PaginationLink>17 </PaginationItem>18 <PaginationItem>19 <PaginationLink href="#" size="icon" aria-label="Page 4">20 421 </PaginationLink>22 </PaginationItem>23 <PaginationItem>24 <PaginationLink href="#" size="icon" aria-label="Page 5">25 526 </PaginationLink>27 </PaginationItem>28 </PaginationContent>29</Pagination>
| Prop | Type | Default | Description |
|---|---|---|---|
| isActive | boolean | false | For PaginationLink - marks the current active page |
| size | "default" | "icon" | "icon" | For PaginationLink - controls the button size |
| href | string | - | The URL to navigate to when the link is clicked |
✓ Use Pagination when:
✗ Don't use when:
Best Practices: