---
title: Pagination (React) - USWDS + Tailwind
description: Help visitors move through paginated content with bounded and
unbounded pagination patterns.
---
# Pagination
Help visitors move through paginated content with bounded and unbounded pagination patterns.
## Examples
### Bounded
```tsx
import { Pagination } from '@uswds-tailwind/react/pagination'
export default function PaginationBoundedDemo() {
return (
{({ pages }) => (
<>
{pages.map((page, index) =>
page.type === 'page'
?
: ,
)}
)}
)
}
```
#### Pages shortcut
`Pagination.Pages` renders a `Pagination.Item` for each visible page and a `Pagination.Ellipsis` for each gap. Inside `Pagination.List`, this:
```tsx
```
is shorthand for the render function used in the full example above:
```tsx
{({ pages }) => (
<>
{pages.map((page, index) =>
page.type === 'page'
?
: ,
)}
)}
```
### Unbounded
```tsx
import { Pagination } from '@uswds-tailwind/react/pagination'
export default function PaginationUnboundedDemo() {
return (
)
}
```
## Component API
Place List inside Root. Use PrevTrigger, NextTrigger, Item, Ellipsis, or the Pages shortcut to build page navigation.
### Root `