build69 / Components / Navigation / Pagination

Pagination

v1.0.15Updated 19 Oct 2026

Standalone pagination controls (separate from the DataTable built-in). Numbered links, prev/next, ellipsis collapse, with optional page-jump input.

View source ← Back to catalog

Preview

Live · 8 stories

DefaultOpen ↗

▸Why this is recommendedpaginationpagepagernavigation+5

The default, out-of-the-box Pagination.

Recommended for+14

✓Paging through a long list of records outside DataTable
✓Page navigation with numbered links and previous / next controls
✓A pager under search results, a blog index or docs
✓Jumping to a page number in a long result set

Tags+6

paginationpagepagernavigationpagingpreviousnextpage-numbersdefault

Features+4

Numbered links with ellipsis collapse
Previous / Next controls
Optional page-jump input
Mini variant for tight toolbars
Sticky variant for long lists
Compositional link: PaginationLink asChild takes the host router link as its single child (same pattern as BreadcrumbLink) and hands it the Button styling, data-slot, aria-current and the disabled boundary state (fb_bf7dc63a)

Not recommended for−2

✕Inside DataTable (uses its own pager)
✕Tiny result sets (< 1 page)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Pagination" })

Usage

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@/components/navigation/pagination';

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
    <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
  </PaginationContent>
</Pagination>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

isActive

PaginationLink: marks the active page

boolean—

asChild

PaginationLink: render the host app router link (the single child) in place of the built-in anchor, keeping the Button styling, data-slot="pagination-link", aria-current and the disabled boundary state. onClick already receives the click event. MCP feedback fb_bf7dc63a.

boolean—

size

PaginationLink: button size preset

string—

href

PaginationLink: the destination. OMIT it for a pager that moves a page number held in state and the control renders a real <button> — an anchor with href="#" runs the handler and then jumps to the top of the document and pushes a history entry, so Back goes nowhere.