1. Docs
  2. Components
  3. Pagination

Pagination

Pagination with page navigation, next and previous links, and arrow key support.

Installation

Anatomy

Examples

Simple

Only page number links without previous and next navigation.

Icons Only

Use <Pagination.Link> with icon children and size="icon" for compact navigation controls.

API Reference

Pagination.Root

PropTypeDefault
children
ReactNode

Pagination.Content

PropTypeDefault
children
ReactNode

Pagination.Item

PropTypeDefault
children
ReactNode
PropTypeDefault
href
string
isActive
boolean
false
size
enum
"icon"

Pagination.Previous

PropTypeDefault
href
string

Pagination.Next

PropTypeDefault
href
string

Pagination.Ellipsis

PropTypeDefault
children
ReactNode

Changelog

2025-02-13

  • Wrapped Pagination.Content with React Aria Toolbar for arrow key navigation between pagination items (single tab stop).
  • Pagination.Content now accepts ToolbarProps from react-aria-components instead of React.ComponentProps<"ul">.