Components
- Accordion
- Alert Dialog
- Alert
- Autocomplete
- Avatar
- Badge
- Button Group
- Button
- Card
- Carousel
- Chart
- Checkbox
- Clipboard
- Collapsible
- Combobox
- Command
- Context Menu
- Date Picker
- Dialog
- Editable
- Field
- File Upload
- Floating Panel
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- QR Code
- Radio Group
- Rating Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Splitter
- Steps
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle Group
- Toggle
- Tooltip
- Tour
- Tree View
Installation
pnpm dlx shadcn@latest add @shark-ui/pagination
Usage
import { Pagination, PaginationItems, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination";
<Pagination> <PaginationPrevious /> <PaginationItems /> <PaginationNext /> </Pagination>
Examples
Controlled
Use page and onPageChange to control the current page.
Page 1 of 5
Page Range
Use page and pageSize properties to show which items are visible.
With Links
Under development
Table
Use <Pagination /> with <Table /> to paginate a table.
| Name | |
|---|---|
| User 1 | user1@example.com |
| User 2 | user2@example.com |
Items per page:
API Reference
Pagination
| Prop | Type | Default |
|---|---|---|
count | number | — |
page | number | — |
defaultPage | number | 1 |
pageSize | number | — |
defaultPageSize | number | 10 |
siblingCount | number | 1 |
onPageChange | (details: PageChangeDetails) => void | — |
onPageSizeChange | (details: PageSizeChangeDetails) => void | — |
For a complete list of props, see the Ark UI documentation.