Pagination
Previous, next and numbered pages for a long list, with gaps past the neighbours of the current page.
<Pagination page={page} onPageChange={setPage} pageCount={12} />Props
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/pagination.jsonThe CLI writes components/ikada/pagination.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Pagination } from "@sproutboat/ikada";
Usage
import { Pagination } from "@/components/ikada/pagination";
<Pagination page={page} onPageChange={setPage} pageCount={12} />Examples
const [page, setPage] = useState(1);
<Pagination page={page} pageCount={12} onPageChange={setPage} />const [page, setPage] = useState(1);
<Pagination compact page={page} pageCount={12} onPageChange={setPage} />const [page, setPage] = useState(1);
<Pagination siblings={2} page={page} pageCount={20} onPageChange={setPage} />Props
| Prop | Type | Description |
|---|---|---|
| pagerequired | number | Current page, starting at 1. |
| pageCountrequired | number | Total number of pages. |
| onPageChangerequired | (page: number) => void | Called with the page to go to. |
| compact | boolean | Previous and next plus "Page 3 of 12", no number buttons. Use it on narrow screens. Default `false`. |
| siblings | number | Pages shown either side of the current one. Default 1. |
Also takes every prop of Omit<ComponentProps<"nav">, "onChange">.
Source: src/components/pagination.tsx