# Pagination

Seven ways to move through pages. The current page lifts onto surface and slides to where you clicked.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/pagination
```

## Usage

```tsx
import { Pagination } from '@/components/fetaui/pagination'

export function Example() {
  return <Pagination pages={12} page={page} onPageChange={setPage} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| kind | simple, numbered, compact, table, jump, load-more, dots | numbered |
| pages | number | 12 |
| page | number |  |
| defaultPage | number | 1 |
| onPageChange | (page) => void |  |
| perPage | number | 25 |
| perPageOptions | number[] | [10, 25, 50, 100] |
| onPerPageChange | (perPage) => void |  |
| total | number | 0 |
| shown | number | 0 |
| step | number | 20 |
| onLoadMore | () => void |  |
| aria-label | string | Pagination |
| animated | boolean | true |

## When to use

- Numbered for search and long lists.
- Table under data tables, and Compact when space is tight.
- Load more for feeds, Dots for carousels.

## When not to use

- For a handful of items that fit on one page.
- Lens Pager is for moments where paging is the point, like a reader.

## Accessibility

- A nav labelled Pagination.
- The current page uses aria-current.
- Arrows are labelled Previous page and Next page. Reaching the end moves focus to the other arrow.
- Dots are buttons with full names, like Go to slide 3.

## Motion

- The active pill slides to the new page on a spring, and page numbers, ranges and counts flow digit by digit to their new values.
- An ellipsis grows into the jump field and focus moves in.
- The Load more track fills in 240 ms.
- The active dot stretches from 6 to 20 over 200 ms, and seen dots darken.
- With reduced motion, the pill jumps and the track fills at once.