# Pagination
Moves through paginated content. Square controls; the current page fills with ink.
Category: navigation
Name: `pagination`
Also known as: Pagination, Pager, Page navigation
Page: https://vlak.dev/components/pagination/
## When to use
- Paged lists and tables where the user needs to jump to a specific page.
- siblings to widen the window around the current page.
## When not to
- Feeds that load more on scroll.
- Fewer than three pages; a previous and next pair is enough.
## Install
**React package.** Precompiled; no compiler to configure.
```sh
npm install @noorddev/vlak-react
```
```tsx
import "@noorddev/vlak-react/css";
import { Pagination } from "@noorddev/vlak-react";
```
**Vendor the source.** The StyleX leaf lands in `components/vlak/` for your compiler to own.
```sh
npx @noorddev/vlak-cli add pagination
```
**shadcn registry.** Same files, through the shadcn CLI.
```sh
npx shadcn add https://vlak.dev/r/pagination.json
```
**CSS only.** `rs-*` classes on plain markup, styled by `@noorddev/vlak/css`.
```html
12
```
## Example
```tsx
import { useState } from "react";
import { Pagination } from "@noorddev/vlak-react";
const [page, setPage] = useState(1);
```
## Props
### Pagination
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLElement`.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `page` (required) | `number` | | Current 1-based page. |
| `count` (required) | `number` | | |
| `onPageChange` | `(page: number) => void` | | |
| `siblings` | `number` | `1` | Pages kept visible around the current one. |
## Keyboard
| Keys | Does |
| --- | --- |
| Tab | Moves between the page buttons |
| Enter, Space | Goes to that page |
## Accessibility
- Renders