Pagination is Ant Design's Pagination, installed into your project as a file you own. It adds no props, and there is no ref because Pagination does not forward one. The kit fills in the prev, next and jumper icons and the size changer's search icon from your icon pack. The icon rows are marked antuikit in the API table.
Install
npx antuikit@latest init
npx antuikit@latest add pagination
Run init once per project to install AntuikitProvider, then add for this component.
Import
From @/components/ui/pagination, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package.
import { Pagination } from "@/components/ui/pagination"
The axes
Two props take a fixed set of values: align places the row and size sets its density. There is no variant or color prop. The current page takes your primary color.
align takes start, center and end, and has no default. Left unset, the parent decides.
size takes small, medium or large. Left unset, it follows ConfigProvider's size. responsive switches to small below 576px instead.
itemRender's type (page, prev, next, jump-prev, jump-next) names the item being rendered. See Slots below.
Flags
Seven booleans, two of them on by default and one that depends on total.
showPrevNextJumpers and showTitle default to true. The first is the pair of skip-ahead items; the second is the native title on every item, which is the only text prev, next and the jumpers carry.
showSizeChanger has no fixed default. It is total > totalBoundaryShowSizeChanger, with the boundary at 50, so a list of 51 shows a Select on its own. Pass false to turn it off, on the component or in ConfigProvider's pagination config.
hideOnSinglePage is off, and it compares total <= pageSize rather than counting pages.
showLessItems is off: on, it keeps one page either side of the current one rather than two, and steps the jumpers 3 pages rather than 5.
disabled is off. It takes every item out of the tab order, so put a list's loading state on the list.
responsive is off. It changes the size, not the layout.
They can cancel each other out. hideOnSinglePage renders nothing on a one-page result, so your showTotal count disappears with it, and nothing warns.
Slots
The props that take a node. Reach for these before a descendant selector. The kit fills in the four icon props, and your own value for any of them wins.
prevIcon and nextIcon are a chevron inside a <button class="ant-pagination-item-link">. If you replace one, wrap your icon in the same button to keep its hover and disabled styles.
jumpPrevIcon and jumpNextIcon are an <a> around two chevrons and an ellipsis. The ellipsis shows at rest, and the chevrons fade in on hover.
Pass null to any of the four to draw no icon. Only undefined gets the kit's default.
itemRender reaches every slot, receiving (page, type, originalElement). Return originalElement for the types you do not care about. It is also where a real href and an aria-current go (see the Accessibility tab).
showTotal is a slot too, (total, range) => node, rendered first in the row as an ordinary list item.
The size changer's search icon comes from your icon pack too, on lists where the changer shows. Pass showSizeChanger={{ showSearch: false }} to show the changer without search.
classNames and styles take the same keys, root and item. Use them before a descendant selector, since a named part stays stable across versions.
1
<Pagination
2
classNames={{
3
root: "…",
4
item: "…",
5
}}
6
/>
A Tailwind class on one of these keys applies without !important. A class that sets a component token's CSS variable on the root does nothing, so style the part instead, or set the token in your theme.
API Reference
Pagination
Pagination's props. Rows marked antuikit in the Version column are added by the kit.