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

Install the component using the Tailgrids CLI.

npx @tailgrids/cli add pagination

Usage

Import the component and control the active page using state.

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

export default PaginationExample = () => (
  <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.

Full Side Layout

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

Label-Only Side Layout

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

Icon-Only Side Layout

Uses icons only for previous and next buttons.

Mobile Preview

The pagination component is fully responsive, seamlessly adapting its layout and controls to ensure a consistent experience across various devices and screen sizes.

Page 1 of 10

API Reference

Pagination

Prop	Type	Default	Description
`currentPage`	`number`	-	The currently active page number (1-based index).
`totalPages`	`number`	-	The total number of available pages.
`onPageChange`	`(page: number) => void`	-	Callback function triggered when a page button is clicked.
`variant`	`'default'`, `'compact'`	`'default'`	Overall pagination style.
`sideLayout`	`'full'`, `'label'`, `'icon'`	`'full'`	Controls the appearance of the "Previous" and "Next" buttons.

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.

Pagination

CLI

Manual

On this page