Core Elements
Pagination
Page navigation with Prev/Next and numbered pages, or a simple "Page X of Y" mode.
Usage
Installation
npx wunderui-cli add paginationWrites the source into your project with its dependencies and, on first use, the styles — see Installation.
Then import what you need:
import { Pagination, PaginationSimple } from "@/components/ui/pagination"Examples
6 pages
Previous and next around 6 page buttons — click a page.
5 pages
Previous and next around 5 page buttons — click a page.
4 pages
Previous and next around 4 page buttons — click a page.
3 pages
Previous and next around 3 page buttons — click a page.
2 pages
Previous and next around 2 page buttons — click a page.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Table footer
Pagination aligned right under a table with a result count.