Pagination Component
Accessible React pagination with smart ellipsis, sibling count control, three sizes and full keyboard support — built with Tailwind CSS.
Import
1import { Pagination } from "@neuctra/ui";Basic Usage
Controlled by page + onPageChange. Ellipses appear automatically for long ranges.
Sibling Count
siblingCount controls how many pages flank the current one.
Sizes
Props
All available props for the Pagination component.
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | — | Current page, 1-based (required) |
| totalPages | number | — | Total number of pages (required) |
| onPageChange | (page: number) => void | — | Fired with the next page |
| siblingCount | number | 1 | Pages shown on each side of the current page |
| size | "sm" | "md" | "lg" | "md" | Button size scale |
| disabled | boolean | false | Disable all controls |
| prevButtonClassName | string | — | Styles the previous-page button |
| nextButtonClassName | string | — | Styles the next-page button |
| pageButtonClassName | string | — | Styles every numbered page button, in addition to the active/inactive styling |
| activePageButtonClassName | string | — | Styles the currently active page button |
| ellipsisClassName | string | — | Styles the ellipsis (…) indicator |
Accessibility
- Wrapped in <nav aria-label="Pagination">; every button has an aria-label.
- The active page carries aria-current="page".
- Prev/next disable automatically at the range edges; all buttons show a focus-visible ring.
Frequently Asked Questions
How do I install and import the Pagination component?
Install the @neuctra/ui package, then import it with: import { Pagination } from "@neuctra/ui";
What variants and sizes does Pagination support?
Pagination supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Pagination component accessible?
Pagination is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.