- Docs
- Components
- Pagination
Pagination
Pagination with page navigation, next and previous links, and arrow key support.
Preview
Code
Installation
CLI
Manual
Anatomy
Single import
Multiple imports
Examples
Simple
Only page number links without previous and next navigation.
Preview
Code
Icons Only
Use <Pagination.Link> with icon children and size="icon" for compact navigation controls.
Preview
Code
API Reference
Pagination.Root
| Prop | Type | Default |
|---|---|---|
children | ReactNode |
Pagination.Content
| Prop | Type | Default |
|---|---|---|
children | ReactNode |
Pagination.Item
| Prop | Type | Default |
|---|---|---|
children | ReactNode |
Pagination.Link
| Prop | Type | Default |
|---|---|---|
href | string | |
isActive | boolean | false |
size | enum | "icon" |
Pagination.Previous
| Prop | Type | Default |
|---|---|---|
href | string |
Pagination.Next
| Prop | Type | Default |
|---|---|---|
href | string |
Pagination.Ellipsis
| Prop | Type | Default |
|---|---|---|
children | ReactNode |
Changelog
2025-02-13
- Wrapped
Pagination.Contentwith React AriaToolbarfor arrow key navigation between pagination items (single tab stop). Pagination.Contentnow acceptsToolbarPropsfromreact-aria-componentsinstead ofReact.ComponentProps<"ul">.