Pagination
Pagination with page navigation, next and previous links.
Installation
›pnpm dlx shadcn@latest add @evolphin/pagination
Usage
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
</PaginationItem>
</PaginationContent>
</Pagination>Examples
Default
API Reference
Pagination
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
PaginationContent
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
PaginationItem
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
PaginationLink
| Prop | Type | Default | Description |
|---|---|---|---|
isActive | boolean | false | Whether the link is active. |
size | `"default" \ | "icon"` | "icon" |
className | string | - | Additional CSS classes |
PaginationPrevious
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
PaginationNext
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
PaginationEllipsis
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |