Browse components
Pagination
Page controls with fixed-width ellipsis logic, a spring-sliding active pill, and ellipses that turn into skip buttons on hover.
Installation
npx shadcn@latest add @glint-ui/paginationFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/pagination.json
Usage
import { Pagination } from "@/components/ui/pagination";
<Pagination total={20} page={page} onPageChange={setPage} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| total | number | 20 | Number of pages. |
| siblings | number | 1 | Pages shown on each side of the current page. |
| boundaries | number | 1 | Pages always shown at each end. |
| showControls | boolean | true | Previous / Next buttons. |
| page | ReactNode | — | Controlled 1-based page (with onPageChange), or use defaultPage. |
| onPageChange | ReactNode | — | Called with the new page. |
| className | string | — | Extra classes for the root element. |