Pagination
Installation
npx shadcn@latest add https://ui.timkit.cn/r/pagination.json
Usage
import { Pagination } from "@/components/ui/pagination"
Examples
Pagination · Disabled State
Loading preview...
Pagination · Disabled State
Loading preview...
Pagination · Go to previous page
Loading preview...
Pagination · Go to previous page
Loading preview...
Pagination · Disabled State
Loading preview...
Pagination · Disabled State
Loading preview...
Pagination · Go to first page
Loading preview...
Pagination · Go to previous page
Loading preview...
Pagination · Go to previous page
Loading preview...
Pagination · Rows per page
Loading preview...
Pagination · Go to first page
Loading preview...
Pagination · Go to page
Loading preview...
Structured API
Component
pagination
Logic
zag / pagination
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | pagination | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | lucide-react | Optional peer dependencies used by this registry item. |
| registryDependencies | array | button | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | 1 | The current active page in controlled mode. |
| defaultPage | number | 1 | The initial page used in uncontrolled mode. |
| count | number | - | Total number of items used to calculate page count. |
| pageSize | number | 10 | Number of items rendered per page. |
| siblingCount | number | 1 | Number of sibling pages shown around the active page. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onPageChange | event | - | Callback fired when the active page changes. |
| onPageSizeChange | event | - | Callback fired when page size changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | The pagination segments |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The pagination container |
| content | part | - | The parent of items |
| item | part | - | A single item wrapper |
| link | part | - | A link to a page |
| previous | part | - | The previous page button |
| next | part | - | The next page button |
| ellipsis | part | - | The ellipsis indicator |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Pagination · Disabled State
- Pagination · Disabled State
- Pagination · Go to previous page
- Pagination · Go to previous page
- Pagination · Disabled State
- Pagination · Disabled State
- Pagination · Go to first page
- Pagination · Go to previous page
- Pagination · Go to previous page
- Pagination · Rows per page
- Pagination · Go to first page
- Pagination · Go to page
- API Reference
Pagination
Installation
npx shadcn@latest add https://ui.timkit.cn/r/pagination.json
Usage
import { Pagination } from "@/components/ui/pagination"
Examples
Pagination · Disabled State
Loading preview...
Pagination · Disabled State
Loading preview...
Pagination · Go to previous page
Loading preview...
Pagination · Go to previous page
Loading preview...
Pagination · Disabled State
Loading preview...
Pagination · Disabled State
Loading preview...
Pagination · Go to first page
Loading preview...
Pagination · Go to previous page
Loading preview...
Pagination · Go to previous page
Loading preview...
Pagination · Rows per page
Loading preview...
Pagination · Go to first page
Loading preview...
Pagination · Go to page
Loading preview...
Structured API
Component
pagination
Logic
zag / pagination
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | pagination | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | lucide-react | Optional peer dependencies used by this registry item. |
| registryDependencies | array | button | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | 1 | The current active page in controlled mode. |
| defaultPage | number | 1 | The initial page used in uncontrolled mode. |
| count | number | - | Total number of items used to calculate page count. |
| pageSize | number | 10 | Number of items rendered per page. |
| siblingCount | number | 1 | Number of sibling pages shown around the active page. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onPageChange | event | - | Callback fired when the active page changes. |
| onPageSizeChange | event | - | Callback fired when page size changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | The pagination segments |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The pagination container |
| content | part | - | The parent of items |
| item | part | - | A single item wrapper |
| link | part | - | A link to a page |
| previous | part | - | The previous page button |
| next | part | - | The next page button |
| ellipsis | part | - | The ellipsis indicator |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Pagination · Disabled State
- Pagination · Disabled State
- Pagination · Go to previous page
- Pagination · Go to previous page
- Pagination · Disabled State
- Pagination · Disabled State
- Pagination · Go to first page
- Pagination · Go to previous page
- Pagination · Go to previous page
- Pagination · Rows per page
- Pagination · Go to first page
- Pagination · Go to page
- API Reference