# antuikit / Pagination

> Pagination with the prev, next and jumper icons, and the size changer's search icon, drawn from the kit's icon pack.

Docs: https://antuikit.com/docs/components/pagination

## Install

npx antuikit@latest init
npx antuikit@latest add pagination

## Import

import { Pagination } from "@/components/ui/pagination";

## Demos

- [Basic](https://ui.antuikit.com/embed/pagination/basic.md): Pass `total`, the number of items, and Pagination works out the page count, like five pages for 50 items at 10 per page.
- [Size](https://ui.antuikit.com/embed/pagination/sizes.md): Set `size` to `small` or `large` for a tighter or roomier row, or leave it out for the medium default between them.
- [Size with all options](https://ui.antuikit.com/embed/pagination/mini.md): `size` scales every part of the row, from the page links to the size changer, the quick jumper and the total, enabled or disabled.
- [Simple mode](https://ui.antuikit.com/embed/pagination/simple.md): Set `simple` for a compact row with a page input between the arrows, or pass `{ readOnly: true }` to show the page as plain text.
- [Controlled](https://ui.antuikit.com/embed/pagination/controlled.md): Pass `current` and `onChange` to keep the page in your own state, so you can fetch its rows or write it to the URL.
- [Disabled](https://ui.antuikit.com/embed/pagination/disabled.md): Set `disabled` to gray out the page links and arrows and take them out of the tab order.
- [Total count](https://ui.antuikit.com/embed/pagination/total.md): Pass `showTotal` a function of `total` and `range` to print a count before the page links, like "1 to 20 of 85 items".
- [Quick jumper](https://ui.antuikit.com/embed/pagination/jumper.md): Set `showQuickJumper` to add a go-to-page field, or pass `{ goButton }` to put a confirm button next to it.
- [Page size options](https://ui.antuikit.com/embed/pagination/page-size-options.md): Pass `pageSizeOptions` to set the sizes the size changer offers, like 10, 25 and 50 per page.
- [Alignment](https://ui.antuikit.com/embed/pagination/align.md): Set `align` to `start`, `center` or `end` to place the row inside a container wider than itself.
- [Navigation icons](https://ui.antuikit.com/embed/pagination/icons.md): `prevIcon`, `nextIcon`, `jumpPrevIcon` and `jumpNextIcon` default to chevrons from your icon pack, and a jumper swaps its ellipsis for a double chevron on hover.
- [Table footer](https://ui.antuikit.com/embed/pagination/table-footer.md): A customer table with a footer that counts the rows on screen and pages through them with a `Pagination`.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/pagination`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Pagination` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.