Pagination

React Pagination components are used to navigate through large sets of content split across multiple pages. They are commonly used in tables, search results, and content listings.

This Pagination component is built with React and styled using Tailwind CSS. It supports different layouts for page buttons, previous and next controls, and automatic ellipsis handling.

Installation

Usage

Import the component and control the active page using state.

import { Pagination } from "@/registry/core/pagination";

export default () => (
  <Pagination
    currentPage={2}
    totalPages={10}
    onPageChange={p => console.log(p)}
  />
);

Examples

Compact Variant

Use the compact variant for a minimal style, often suited for smaller sections or footers.

<Pagination
  currentPage={2}
  totalPages={10}
  variant="compact"
  onPageChange={p => console.log(p)}
/>

Full Side Layout

This is the default layout, showing both the icon and the text label ("Previous"/"Next") for side buttons.

<Pagination
  currentPage={5}
  totalPages={10}
  sideLayout="full" // default
  onPageChange={p => console.log(p)}
/>

Label-Only Side Layout

Shows only the text label ("Previous"/"Next") on desktop, but hides it on mobile to save space.

<Pagination
  currentPage={5}
  totalPages={10}
  sideLayout="label"
  onPageChange={p => console.log(p)}
/>

Icon-Only Side Layout

Uses icons only for previous and next buttons.

<Pagination
  currentPage={5}
  totalPages={10}
  sideLayout="icon"
  onPageChange={p => console.log(p)}
/>

API Reference

Pagination

Accessibility

• Uses semantic <nav> with role="navigation" and aria-label="Pagination".
• All interactive page buttons and side buttons have descriptive aria-label attributes.
• The currently active page is indicated using aria-current="page".
• Disabled states on side buttons clearly communicate when no previous or next page is available.

Notes

• When totalPages is greater than 6, an ellipsis (...) is automatically inserted to collapse the page numbers, showing pages 1-3, the current page and its two neighbors, and the last two pages.
• Page number buttons and text labels are hidden on smaller screens (max-sm) to show a compact "Page X of Y" display.
• The sideLayout prop controls the visibility of the icon and text in the "Previous" and "Next" buttons, though on mobile, only the icon is shown for full and icon layouts, and the label is hidden for the label layout.