Pagination

Links between the pages of a long list.

When to use

Use when: Moving through pages of results when position matters, such as tables.
Avoid when: People scan a feed; load more as they scroll instead.

Installation

bunx shelf add pagination

The source lands in src/components/ui/pagination.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Pagination from "@/components/ui/pagination";

<Pagination.Root>
  <Pagination.List>
    <Pagination.Item><Pagination.Previous href="?page=1" /></Pagination.Item>
    <Pagination.Item><Pagination.Link href="?page=1">1</Pagination.Link></Pagination.Item>
    <Pagination.Item><Pagination.Link href="?page=2" isActive>2</Pagination.Link></Pagination.Item>
    <Pagination.Item><Pagination.Next href="?page=3" /></Pagination.Item>
  </Pagination.List>
</Pagination.Root>

Built on

Packages: @stylexjs/stylex
Shelf items: Button, foundations, Icons, utils
Figma: In progress. See Designers and Figma.