---
title: Pagination
description: 带有页码、上一页与下一页链接的分页组件。
component: true
---
```tsx
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination"
export function PaginationDemo() {
return (
1
2
3
)
}
```
## 安装
CLI
手动
```bash
npx shadcn@latest add pagination
```
将下面的代码复制到你的项目中。
根据项目结构调整导入路径。
## 用法
```tsx showLineNumbers
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination"
```
```tsx showLineNumbers
1
```
### Next.js
默认情况下 `` 会渲染 `` 标签。
如果想使用 Next.js 的 ``，请按以下方式修改 `pagination.tsx`。
```diff showLineNumbers /typeof Link/ {1}
+ import Link from "next/link"
- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps
const PaginationLink = ({...props }: ) => (
-
+
// ...
-
+
)
```
**注意：** CLI 会在后续更新中自动完成此修改。