# Pagination

> Classic numbered pagination with siblings, boundaries and ellipses that never shift the controls, Previous and Next that drop to icons in narrow containers, aria-current, and links or buttons. Also exports TablePagination, a table footer with rows per page, "21–40 of 312" and first, previous, next and last, plus SimplePagination for "Page 3 of 16".

- Slug: `pagination`
- Category: [Pagination](https://www.assembli.design/category/pagination.md)
- Type: component
- Tags: pagination, pager, table, navigation, rows-per-page, shadcn
- npm dependencies: lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/pagination
- Page: https://www.assembli.design/components/pagination

![Pagination preview](https://www.assembli.design/thumbnails/pagination-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `page` | `number` |  | The current page, 1-based. Pass with `onPageChange` to control it. |
| `defaultPage` | `number` | `1` |  |
| `onPageChange` | `(page: number) => void` |  |  |
| `getHref` | `(page: number) => string` |  | Turns every control into a link, for server-rendered or crawlable lists. |
| `size` | `Size` | `"md"` |  |
| `pageCount` (required) | `number` |  |  |
| `siblings` | `number` | `1` | Pages either side of the current one. |
| `boundaries` | `number` | `1` | Pages always shown at each end. |
| `previousLabel` | `string` | `"Previous"` |  |
| `nextLabel` | `string` | `"Next"` |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/pagination/pagination.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/pagination
```

Registry item JSON: https://www.assembli.design/r/pagination.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.