Pagination

Page navigation with ellipsis and size selector.

navigationpaginationlist

Import

import { Pagination } from "@/components/ui";

Basic Usage

Pagination Preview

Code

tsx

const [page, setPage] = useState(1);

return (
  <Pagination
    page={page}
    totalPages={10}
    onPageChange={setPage}
  />
);

With Page Size

Show page size selector

1<Pagination
2  page={page}
3  totalPages={totalPages}
4  pageSize={pageSize}
5  onPageChange={setPage}
6  onPageSizeChange={setPageSize}
7  showSizeChanger
8/>

Simple Pagination

Just previous/next buttons

1<div className="flex items-center justify-between">
2  <Button
3    variant="outline"
4    onClick={() => setPage(page - 1)}
5    disabled={page === 1}
6  >
7    Previous
8  </Button>
9  <span className="text-sm text-muted-foreground">
10    Page {page} of {totalPages}
11  </span>
12  <Button
13    variant="outline"
14    onClick={() => setPage(page + 1)}
15    disabled={page === totalPages}
16  >
17    Next
18  </Button>
19</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring