# Pagination

Move through bounded pages with a compact view of the whole sequence.

- Family: Navigation, imported from `mizu-ui` or `mizu-ui/navigation`
- Docs: https://mizu.user64bit.world/components/pagination
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/navigation/Navigation.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { Pagination } from "mizu-ui";

export function Example() {
  const [page, setPage] = useState(3);
  return (
    <div>
      <Pagination page={page} totalPages={12} onPageChange={setPage} />
      <p className="mizu-field-hint">Showing page {page} of 12.</p>
    </div>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/pagination
```

## Props

- `page / totalPages`: `number`. One-based current page and total.
- `onPageChange`: `(page: number) => void`. Load or show the requested page.

## Accessibility

Labelled navigation; current page and disabled boundaries are explicit. No fetching is implied.

## Motion

CSS transitions explain state changes. Reduced motion removes travel.