Pagination

Pagination sits below a paged table or list where the page number matters, for example in shareable URLs. Your app owns the page count, slicing and fetching. The component renders the controls.

Install

bashnpx shadcn@4.18.0 add @siteplane/pagination

Import it from @/siteplane/components/pagination. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Button: Pick a Load more Button or infinite scroll instead when people browse a feed and never need to jump to a page.
• vs Tabs: Pick Tabs instead for a handful of named sections.
• vs Table: Pair Pagination with Table; the table renders the current slice and the pagination moves between slices.

Rules

• Keep the current page in app state or the URL and set active on its PaginationLink so it carries aria-current page.
• Disable PaginationPrevious and PaginationNext at the first and last page; you compute the bounds.
• Pass real links through render when pages have URLs, so people can open them in a new tab.
• Use variant="ghost" where space is tight; the arrows keep their accessible names without the visible text.
• Translate the landmark and button names through labels; don't patch the parts.

Reference

• Pagination docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Navigation. Read the installed source under src/siteplane before relying on an API.