Installation

Barrel

Granular

Usage

export default function Example() {
  const [page, setPage] = useState(1);

  return (
    <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />
  );
}

Examples

Full Controls (Default)

The default pagination includes first, previous, page input, next, and last buttons.

Simple Controls

Use controls="simple" for a minimal pagination with only previous and next buttons.

Mid-Page State

Pagination in the middle of a dataset with all navigation enabled.

Large Dataset

Pagination handles large datasets with many pages.

Custom Text

You can set custom pagination text.

Compound Components

For more control over layout and features, use the compound component API. This allows you to compose `Pagination.Info`, `Pagination.PageSize`, `Pagination.Controls`, and `Pagination.Separator` in any order.

Page Size Selector

Add a dropdown to let users select the number of items per page.

Custom Page Size Options

Customize the available page size options with the options prop. Defaults to [25, 50, 100, 250].

Custom Info Text

Use a render function to customize the info text.

Custom Layout

Arrange components in any order. Here the page size selector is on the right.

Dropdown Page Selector

  Use `pageSelector="dropdown"` on `Pagination.Controls` to render a dropdown
  select instead of a text input for page navigation. This is useful when you
  want users to pick from a list of available pages rather than typing a number.

Internationalization

Use the `labels` prop to customize all UI strings for different locales. All labels default to English.

API Reference