Pagination

A self-contained pagination component with four visual variants, each independently functional. Every variant smoothly animates its active-page highlight with Framer Motion. Render all four stacked, or a single variant via the variant prop.

Preview

Installation

Install the component using the CLI.

npx shadcn@latest add https://shreyashtech.me/r/pagination.json

Usage

Import the component:

import Pagination from "@/components/pagination"

Use it in your code:

<Pagination />

Props

Property	Type	Default	Description
totalPages	number	40	Total number of pages.
page	number	-	Controlled current page (1-indexed). Pass with onPageChange.
defaultPage	number	1	Uncontrolled initial page. Ignored if page is provided.
onPageChange	function	-	Called whenever the page changes, from any variant.
variant	"pills" \| "outline" \| "compact" \| "input"	all four	Render only this single variant instead of the full four-row demo.
variants	PaginationVariant[]	["pills", "outline", "compact", "input"]	Which variants to render in showcase mode (ignored if variant is set). Reorder or remove entries to change what's shown.
showInput	boolean	true	Show the "Go to page" input on the input variant.
disabled	boolean	false	Disable every control in every rendered variant.
siblingCount	number	2	How many pages to show on each side of the current page.
className	string	-	Extra classes applied to the outermost wrapper.