034
Pagination
NavigationPage 1 of 12
Customize
Pages
Code
<Pagination page={page} count={12} onPageChange={setPage} />Install
npx shadcn@latest add https://components.haedong.dev/r/pagination.json
Props
Controlled: pass page and handle onPageChange. Neighbors within siblings of the current page plus the first and last are shown; gaps collapse to ….
| Prop | Type | Description |
|---|---|---|
| page / count | number | Current page (1-based) and total pages. |
| onPageChange | (page: number) => void | Called from the numbers and arrows. |
| siblings | number | Numbers shown on each side of the current page. Defaults to 1. |