Pagination

<Pagination>  <PaginationRowsPerPage defaultValue="15" />  <PaginationContent>    <PaginationItem>      <PaginationPrevious href="#" />    </PaginationItem>    <PaginationItem>      <PaginationLink href="#">1</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationLink href="#" isActive>2</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationLink href="#">3</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationEllipsis />    </PaginationItem>    <PaginationItem>      <PaginationNext href="#" />    </PaginationItem>  </PaginationContent></Pagination>

Usage

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationRowsPerPage,
} from "@reva/ui";

Pagination is a right-aligned flex container (flex w-full items-center justify-end gap-6). The default composition places a PaginationRowsPerPage selector on the left of the cluster and a PaginationContent (Prev / numbered links / Next) on the right, with both pushed to the right edge of the container.

PaginationLink is an IconButton (square), rendered as variant="secondary" when isActive and variant="ghost" otherwise. PaginationPrevious and PaginationNext default to icon-only and render as square IconButtons — pass a text prop (e.g. text="Previous") to render a visible label alongside the chevron, which switches the control to a rectangular Button.

PaginationRowsPerPage composes Field + Select with a "Items per page" label and a compact size="sm" trigger. It exposes both controlled (value / onValueChange) and uncontrolled (defaultValue) APIs.

Composition

Use the following composition to build a Pagination:

Pagination
├── PaginationRowsPerPage
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext

Examples

Page numbers only

Omit PaginationRowsPerPage when you don't need a rows-per-page selector — the PaginationContent simply sits flush right.

<Pagination>  <PaginationContent>    <PaginationItem>      <PaginationLink href="#">1</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationLink href="#" isActive>2</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationLink href="#">3</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationLink href="#">4</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationLink href="#">5</PaginationLink>    </PaginationItem>  </PaginationContent></Pagination>

Icons only

Use just the previous / next buttons alongside a rows-per-page selector — useful for compact table footers where a full page list isn't needed.

<Pagination>  <PaginationRowsPerPage defaultValue="25" />  <PaginationContent>    <PaginationItem>      <PaginationPrevious href="#" />    </PaginationItem>    <PaginationItem>      <PaginationNext href="#" />    </PaginationItem>  </PaginationContent></Pagination>

Labeled previous / next

Pass a text prop to PaginationPrevious and PaginationNext to surface a visible label next to the chevron. The control switches to a rectangular Button automatically.

<Pagination>  <PaginationRowsPerPage defaultValue="15" />  <PaginationContent>    <PaginationItem>      <PaginationPrevious href="#" text="Previous" />    </PaginationItem>    <PaginationItem>      <PaginationLink href="#">1</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationLink href="#" isActive>2</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationLink href="#">3</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationNext href="#" text="Next" />    </PaginationItem>  </PaginationContent></Pagination>

Custom alignment

Override the default justify-end on the Pagination root via className — e.g. justify-between to push the two clusters to opposite edges, or justify-start to left-align the whole thing.

<Pagination className="justify-between">
  <PaginationRowsPerPage defaultValue="15" />
  <PaginationContent>{/* ... */}</PaginationContent>
</Pagination>

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Marks the current page. Renders with `variant="secondary"`.

PaginationPrevious / PaginationNext

Extends React.ComponentProps<"a">.

Prop	Type	Default	Description
`text`	`string`	—	When provided, renders a visible label alongside the chevron and switches the control to a rectangular `Button`. When omitted, renders icon-only as a square `IconButton`. The accessible `aria-label` (`"Go to previous/next page"`) is always present.

PaginationRowsPerPage

Composes Field + Select with a compact "Items per page" label.

Prop	Type	Default	Description
`value`	`string`	—	Controlled value (stringified number).
`defaultValue`	`string`	—	Uncontrolled initial value.
`onValueChange`	`(value: string) => void`	—	Fires when the user picks a different option.
`options`	`readonly (number \| string)[]`	`[10, 15, 25, 50, 100]`	Options rendered in the dropdown.
`label`	`string`	`"Items per page"`	`FieldLabel` text.
`className`	`string`	—	Merged onto the wrapping `Field`.

Pagination

On this page