Pagination
Move through a long collection with clear bounds.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Paged server results and long tables.
- Lists where the page should live in the URL or state and fetch on change.
- Use carousel for browsing slides.
- Use timeline with maxHeight for a scrolling feed instead of pages.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Pagination } from 'animui/pagination';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { useState } from "react";import { Pagination } from "animui/pagination"; export function Results() { const [page, setPage] = useState(1); return <Pagination page={page} pageCount={12} onPageChange={setPage} />;}Pagination
Previous and next buttons around a sliding five page window with a traveling current page mark.
PropTypeDefaultDescription
pageRequirednumber–Current page, 1-based. Clamped to the range.pageCountRequirednumber–Total pages. Zero renders an empty nav.onPageChangeRequired(page: number) => void–Called with the requested page.labelstring"Pagination"Accessible name for the nav landmark.- Tab
- Moves between the previous, page, and next buttons.
- EnterorSpace
- Goes to that page.
- Renders a nav landmark with the label as its name.
- Page buttons are labelled "Page 3" and the current one has aria-current="page".
- Previous and next are disabled at the ends and carry aria-labels.
- The current page mark springs to the selected button.
- When the window shifts, numbers slide like a belt by the number of slots moved.
- Reduced motion jumps the mark and swaps numbers without sliding.
- It always shows a five page window plus arrows, so it stays the same width on any screen.
- The row wraps if its container is narrower than the buttons, and the current mark re-measures on resize.
- Only five page buttons render regardless of pageCount; one ResizeObserver repositions the current mark.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for paged server results and long tables. Use carousel for browsing slides.
- It is fully controlled: keep page in state or the URL and fetch on onPageChange.
The full library index for assistants is at /llms.txt.