Pagination
Pagination splits long content into pages and lets people move between them quickly.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
// npm install yugen-uiimport { Pagination } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Controlled
siblingCount & few pages
siblingCount={2} shows more pages on each side; with few pages, every page is shown.
Small, icons only
size="small" and showLabels={false} for compact data tables.
Usage
- Place Pagination right below the list or table it controls.
- Keep it in a fixed position so people can click repeatedly without moving the mouse.
- Don't use it for continuous content (feeds). Consider loading more items instead.
- Don't show Pagination when there is only one page.
Props
| Prop · Type | Default | Description |
|---|---|---|
| page / defaultPagenumber | Default: — / 1 | Current page, starting at 1. |
| pageCountnumber | Default: — | Required. Total number of pages. |
| onPageChange(page: number) => void | Default: — | Called when another page is selected. |
| siblingCountnumber | Default: 1 | Pages shown on each side of the current page. |
| size"small" | "medium" | Default: "medium" | Buttons 24 / 32px. |
| showLabelsboolean | Default: true | Shows the “Previous” / “Next” labels. |
| disabledboolean | Default: — | Disables the whole control. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.pagination
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| labelstring aria-label mặc định của thẻ <nav>. | Default (English)"Pagination" | messagesVi"Phân trang" |
| previousPagestring aria-label nút trang trước. | Default (English)"Previous page" | messagesVi"Trang trước" |
| nextPagestring aria-label nút trang sau. | Default (English)"Next page" | messagesVi"Trang sau" |
| previousstring Chữ hiện cạnh mũi tên trang trước ( | Default (English)"Previous" | messagesVi"Trước" |
| nextstring Chữ hiện cạnh mũi tên trang sau ( | Default (English)"Next" | messagesVi"Sau" |
| page(page: number) => string aria-label của nút số trang. | Default (English)(page) => `Page ${page}` | messagesVi(page) => `Trang ${page}` |