Pagination

Copy Markdown

Navigate through a list of items.

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/pagination

Pagination
├── PaginationPrevious
├── PaginationItems
└── PaginationNext

import {
  Pagination,
  PaginationItems,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

<Pagination>
  <PaginationPrevious />
  <PaginationItems />
  <PaginationNext />
</Pagination>

Use page and onPageChange to control the current page.

PreviewCode

Page 1 of 5

Use page and pageSize properties to show which items are visible.

PreviewCode

Under development

Use Pagination with Table to paginate a table.

PreviewCode

Name	Email
User 1	[email protected]
User 2	[email protected]

Items per page:

234

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.

[

Number Input ](/docs/components/number-input)[

Password Input ](/docs/components/password-input)

On This Page