# @rc-component/pagination > pagination ui component for react Latest version **1.5.0** (published 2026-07-03) · MIT license · 0 weekly downloads ## Install ```sh npm install @rc-component/pagination pnpm add @rc-component/pagination yarn add @rc-component/pagination bun add @rc-component/pagination ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 1.5.0 | | Published | 2026-07-03 | | First published | 2025-02-07 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 186.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 674 | | Maintainers | zombiej, afc163, madccc, peachscript, chenshuai2144 | | Keywords | react, react-component, react-pagination, pagination, antd, pager | ## Links - npm: https://www.npmjs.com/package/@rc-component/pagination - Repository: https://github.com/react-component/pagination - Homepage: https://react-component.github.io/pagination - Issues: https://github.com/react-component/pagination/issues - npm.io page: https://npm.io/package/@rc-component/pagination ## Dependencies (2) - [clsx](https://npm.io/package/clsx.md) ^2.1.1 - [@rc-component/util](https://npm.io/package/@rc-component/util.md) ^1.11.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.5.0 (latest) — 2026-07-03 - 1.4.0 — 2026-06-09 - 1.3.0 — 2026-05-27 - 1.2.0 — 2025-11-13 - 1.1.4 — 2025-11-04 - 1.1.3 — 2025-09-26 - 1.1.2 — 2025-09-16 - 1.1.1 — 2025-02-20 - 1.1.0 — 2025-02-19 - 1.0.0 — 2025-02-07 ## README

@rc-component/pagination

Ant Design Part of the Ant Design ecosystem.

📄 React pagination primitives for page navigation, size changing, quick jumping, and locale-aware controls.

NPM version npm downloads build status Codecov bundle size dumi

English | 简体中文

## Highlights - Controlled and uncontrolled pagination state. - Page-size changer, quick jumper, simple mode, compact item count, and custom item rendering. - Locale packages exposed from `@rc-component/pagination/locale/*`. - Semantic `classNames` and `styles` for item-level customization. - TypeScript definitions for props, locale, callbacks, and state. - Used by Ant Design as the shared pagination foundation. ## Install ```bash npm install @rc-component/pagination ``` ## Usage ```tsx | pure import Pagination from '@rc-component/pagination'; import '@rc-component/pagination/assets/index.css'; export default () => ( ); ``` ```tsx | pure import Pagination from '@rc-component/pagination'; import enUS from '@rc-component/pagination/locale/en_US'; export default () => ( `${range[0]}-${range[1]} of ${total} items`} /> ); ``` ## Examples Run the local dumi site: ```bash npm install npm start ``` Then open `http://localhost:8000`. ## API ### Pagination | Property | Type | Default | Description | | ---------------------------- | ----------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | align | `'start' \| 'center' \| 'end'` | - | Align pagination items. | | className | `string` | - | Class name for the root element. | | classNames | `Partial>` | - | Semantic class names. | | current | `number` | - | Controlled current page. | | defaultCurrent | `number` | `1` | Initial current page. | | defaultPageSize | `number` | `10` | Initial page size. | | disabled | `boolean` | `false` | Disable pagination interactions. | | hideOnSinglePage | `boolean` | `false` | Hide when there is only one page. | | itemRender | `(page, type, element) => ReactNode` | - | Customize page, previous, next, and jump items. | | jumpNextIcon | `ReactNode \| ComponentType` | - | Custom next-jump icon. | | jumpPrevIcon | `ReactNode \| ComponentType` | - | Custom previous-jump icon. | | locale | `PaginationLocale` | `zh_CN` | Locale text. | | nextIcon | `ReactNode \| ComponentType` | - | Custom next icon. | | pageSize | `number` | - | Controlled page size. | | pageSizeOptions | `number[]` | - | Page-size options. | | prefixCls | `string` | `rc-pagination` | Class name prefix. | | prevIcon | `ReactNode \| ComponentType` | - | Custom previous icon. | | role | `React.AriaRole` | - | WAI-ARIA role. | | selectPrefixCls | `string` | `rc-select` | Prefix for the size changer select. | | showLessItems | `boolean` | `false` | Show fewer page items. | | showPrevNextJumpers | `boolean` | `true` | Show previous and next jumpers. | | showQuickJumper | `boolean \| object` | `false` | Show quick page jumper. | | showSizeChanger | `boolean` | `total > totalBoundaryShowSizeChanger` | Show page-size changer. | | showTitle | `boolean` | `true` | Show title on page items. | | showTotal | `(total, range) => ReactNode` | - | Render total text. | | simple | `boolean \| { readOnly?: boolean }` | `false` | Use simple pager. | | sizeChangerRender | `SizeChangerRender` | - | Customize the size changer. | | style | `React.CSSProperties` | - | Root inline style. | | styles | `Partial>` | - | Semantic styles. | | total | `number` | `0` | Total item count. | | totalBoundaryShowSizeChanger | `number` | `50` | Boundary for default `showSizeChanger`. | | onChange | `(page: number, pageSize: number, info?: { recommendPage?: number }) => void` | - | Triggered when page or page size changes. The `info.recommendPage` is only provided when pageSize changes, indicating the recommended page number based on the new page size. | | onShowSizeChange | `(current: number, size: number) => void` | - | Triggered when page size changes. | ## Development ```bash npm install npm start npm test npm run tsc npm run coverage npm run compile npm run build ``` The dumi site runs at `http://localhost:8000` by default. ## Release ```bash npm run prepublishOnly ``` The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. ## License @rc-component/pagination is released under the [MIT](./LICENSE) license. --- _Source: https://npm.io/package/@rc-component/pagination · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._