Pagination
Pagination with page navigation, next and previous links.
Made by shadcn
Loading component...
When to use
Pagination components help users navigate through large datasets by breaking content into manageable pages. Use this decision tree to determine when it's appropriate:
Installation
Usage
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
SimplePagination,
} from "@/components/ui/pagination"<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
</PaginationItem>
</PaginationContent>
</Pagination>Examples
Default
Loading component...
Card
Loading component...
Simple Pagination
A higher-level component that provides smart pagination with ellipsis handling.
Loading component...
SimplePagination Props
| Prop | Type | Default | Description |
|---|---|---|---|
currentPage | number | - | The current active page (required) |
totalPages | number | - | Total number of pages (required) |
onPageChange | (page: number) => void | - | Callback when page changes |
showEllipsis | boolean | true | Whether to show ellipsis (...) |
maxVisiblePages | number | 5 | Maximum number of page buttons to show |
className | string | - | Additional CSS classes |
Usage
import { SimplePagination } from "@/components/ui/pagination"
function MyComponent() {
const [currentPage, setCurrentPage] = useState(1);
const totalPages = 20;
return (
<SimplePagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={setCurrentPage}
/>
);
}Next.js
By default the <PaginationLink /> component will render an <a /> tag.
To use the Next.js <Link /> component, make the following updates to pagination.tsx.
+ import Link from "next/link"
- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>
const PaginationLink = ({...props }: ) => (
<PaginationItem>
- <a>
+ <Link>
// ...
- </a>
+ </Link>
</PaginationItem>
)Note: Shadcn CLI is expecting updates to automatically do this for us.
Credits
- We take our inspiration from Shadcn UI for the pagination component and style.
Built by malinskibeniamin. The source code is available on GitHub.