Pagination
Pagination with page navigation, next and previous links.
Shadcn UI
LucideInstallation
bash
npx shadcn@latest add @redpanda/paginationbash
pnpm dlx shadcn@latest add @redpanda/paginationbash
yarn dlx shadcn@latest add @redpanda/paginationbash
bunx shadcn@latest add @redpanda/paginationbash
nubx shadcn@latest add @redpanda/paginationbash
aube dlx shadcn@latest add @redpanda/paginationWhen 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
tsx
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, SimplePagination,} from '@/components/ui/pagination';tsx
<Pagination> <PaginationContent> <PaginationItem> <PaginationPrevious href="#" /> </PaginationItem> <PaginationItem> <PaginationLink href="#">1</PaginationLink> </PaginationItem> <PaginationItem> <PaginationEllipsis /> </PaginationItem> <PaginationItem> <PaginationNext href="#" /> </PaginationItem> </PaginationContent></Pagination>Examples
Default
Card
Simple Pagination
A higher-level component that provides smart pagination with ellipsis handling.
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
tsx
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.
diff
+ 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>)Credits
- We take our inspiration from Shadcn UI for the pagination component and style.