Page navigation with ellipsis collapsing, an indicator that slides between pages and a compact variant with a page select.
npx shadcn@latest add https://hyperblur.dev/r/pagination.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pagination.tsx.
import { Pagination } from "@/components/hyperblur/pagination"
<Pagination total={24} defaultPage={3} onPageChange={(page) => console.log(page)} />| Prop | Type | Default | Description |
|---|---|---|---|
| total | number | 12 | Total number of pages. |
| page | number | Controlled current page, starting at 1. Pair with onPageChange. | |
| defaultPage | number | 1 | Initial page when uncontrolled. |
| onPageChange | (page: number) => void | Called with the new page whenever it changes. | |
| siblings | number | 1 | Pages shown on each side of the current page before collapsing into an ellipsis. |
| boundaries | number | 1 | Pages always shown at the start and at the end of the list. |
| size | "sm" | "md" | "lg" | "md" | Height of the buttons: 28, 34 or 40 pixels. |
| variant | "full" | "compact" | "full" | Numbered buttons, or a compact Page N of M control with a select. |
| accent | string | "#2f7bff" | Color of the active page indicator and focus ring. |