Pagination
Page navigation for long lists, in the kit's pixel style: square cells with cut pixel corners, the pixel dissolve on hover and focus, the current page filled with the accent, pixel arrows and a dotted gap. The current page is marked with aria-current="page"; previous/next are disabled at the ends.
import { Pagination } from "pixelbits/pagination";
import { useState } from "react";
export default function Demo() {
const [page, setPage] = useState(4);
return <Pagination page={page} count={12} onPageChange={setPage} />;
}Installation
import { Pagination } from "pixelbits/pagination";npx shadcn add https://pixelbits.ali-moradi-develop.com/r/pagination.jsonAPI
<Pagination>
Page navigation for long lists, in the kit's pixel style: square cells with cut pixel corners, the pixel dissolve on hover and focus, the current page filled with the accent, pixel arrows and a dotted gap. The current page is marked with aria-current="page"; previous/next are disabled at the ends.
<Pagination page={page} count={9} onPageChange={setPage} />
<Pagination page={3} count={42} href={(p) => `/blog?page=${p}`} />| Prop | Type | Default | Description |
|---|---|---|---|
| page* | number | — | The current page, starting at 1. |
| count* | number | — | Number of pages. |
| onPageChange | (page: number) => void | — | Called with the page the user picked (for client-side paging). |
| href | (page: number) => string | — | Builds a link for a page (for server-rendered paging, crawlable). When set, pages render as links instead of buttons. |
| siblings | number | 1 | Pages shown on each side of the current one. |
| aria-label | string | "Pagination" | Accessible name of the navigation landmark. |
Also accepts every prop of Omit<HTMLAttributes<HTMLElement>, "onChange">.