Zentauri UI
Navigation

Pagination for large datasets

Pagination splits long datasets into navigable windows with clear current-page cues. Use it in React tables and Next.js routes that sync page index to the URL for shareable views.

Examples

Each block uses the same Show output / Show code toggle as the variant gallery below so you can match the live UI to a copy-ready snippet.

Controlled + compact

Middle window uses siblingCount; ends use boundaryCount. Prev and Next stay keyboard-friendly on the nav region.

Current page: 7

Headless API

Current page 7 of 40. canGoPrev=true, canGoNext=true.

[
  {
    "type": "page",
    "value": 1
  },
  {
    "type": "ellipsis",
    "key": "gap-1-6"
  },
  {
    "type": "page",
    "value": 6
  },
  {
    "type": "page",
    "value": 7
  },
  {
    "type": "page",
    "value": 8
  },
  {
    "type": "ellipsis",
    "key": "gap-8-40"
  },
  {
    "type": "page",
    "value": 40
  }
]

Pagination variants examples

Each row pairs live output with matching JSX. The Variant line states which appearance/size tokens apply; pageCount, defaultPage, siblingCount, and boundaryCount stay fixed so ellipsis behavior stays visible.

Appearance: DEFAULT, Size: MD

Appearance: SECONDARY, Size: MD

Appearance: DESTRUCTIVE, Size: MD

Appearance: OUTLINE, Size: MD

Appearance: GHOST, Size: MD

Appearance: LINK, Size: MD

Appearance: GLASS, Size: MD

Appearance: EMERALD, Size: MD

Appearance: INDIGO, Size: MD

Appearance: PURPLE, Size: MD

Appearance: PINK, Size: MD

Appearance: ROSE, Size: MD

Appearance: SKY, Size: MD

Appearance: TEAL, Size: MD

Appearance: YELLOW, Size: MD

Appearance: ORANGE, Size: MD

Appearance: GRAY, Size: MD

Appearance: AMBER, Size: MD

Appearance: VIOLET, Size: MD

Appearance: GRADIENT-BLUE, Size: MD

Appearance: GRADIENT-GREEN, Size: MD

Appearance: GRADIENT-RED, Size: MD

Appearance: GRADIENT-YELLOW, Size: MD

Appearance: GRADIENT-PURPLE, Size: MD

Appearance: GRADIENT-TEAL, Size: MD

Appearance: GRADIENT-INDIGO, Size: MD

Appearance: GRADIENT-PINK, Size: MD

Appearance: GRADIENT-ORANGE, Size: MD

Appearance: SECONDARY, Size: SM

Appearance: SECONDARY, Size: MD

Appearance: SECONDARY, Size: LG

Appearance: SECONDARY, Size: XL

Appearance: SECONDARY, Size: ICON

What it does

Expose aria-current on the active page where applicable.

Keep page size controls near the pager when users frequently tune density.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Ensure keyboard users can move across controls without excessive tab stops.

Common use cases

  • Server-rendered tables with querystring page params.
  • Admin audit logs with thousands of rows.
  • API-backed galleries with stable page sizes.
  • Embedded widgets inside dashboards.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Pagination component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize pagination with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Pagination implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.