✨ QuickCode UI keeps growing! More components, more features, and more ways to make your projects shine. Stay tuned & maybe… hire me or sponsor me 😉

Pagination

A flexible and accessible pagination component used to navigate multiple pages of content.

Install Dependencies

npx quickcode-ui add Pagination

pnpm dlx quickcode-ui add Pagination

yarn dlx quickcode-ui add Pagination

bunx quickcode-ui add Pagination

Usage

Basic Pagination

Props

Component	Prop	Type	Default	Description
`Pagination`	`className`	`string`	`undefined`	Wrapper element for pagination UI.
	`children`	`React.ReactNode`	Required	Pagination items to render.
`PaginationContent`	`children`	`React.ReactNode`	Required	Holds all pagination buttons/links.
`PaginationItem`	`children`	`React.ReactNode`	Required	Single pagination item wrapper.
`PaginationLink`	`href`	`string`	`"#"`	Target URL.
	`isActive`	`boolean`	`false`	Highlights active page.
	`children`	`React.ReactNode`	Required	Page number or custom content.
`PaginationPrev`	`href`	`string`	`"#"`	Target URL for previous page.
	`children`	`React.ReactNode`	Optional	Custom label (example: `"Prev"`).
`PaginationNext`	`href`	`string`	`"#"`	Target URL for next page.
	`children`	`React.ReactNode`	Optional	Custom label (example: `"Next"`).
`PaginationEllipsis`	`children`	`React.ReactNode`	Optional	Custom ellipsis symbol.

Last updated on October 31, 2025

OTP Input PasswordInput