Pagination
Pagination with page navigation, next and previous links.
Made by shadcn
Installation
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:
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.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.