Build · New

Pagination

Splits long lists and tables into pages, and marks the slide showing in carousels and onboarding.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/pagination

Dependencies it brings: @base-ui/react, @phosphor-icons/react

import { Pagination } from "@/components/ui/pagination";

<Pagination pageCount={20} page={page} onPageChange={setPage} />

hrefPattern makes every page a real link (?page={page}), so server pages paginate without client code.

The arrows and where you are ("Page 1 of 20"), for narrow spaces.

The count and a "Load more" button for feeds; the button shows its spinner and turns off on the last page.

PaginationDots: dot or line, two sizes, on a blurred pill over images. With onCurrentChange each dot is a button.

Prop	Type	Default	Description
`variant`	`"numbers" \| "minimal" \| "load-more"`	`"numbers"`	Figma's Style (`style` is reserved in React).
`pageCount`	`number`		How many pages there are.
`page / defaultPage`	`number`	`1`	The current page, from 1.
`onPageChange`	`(page: number) => void`		Called with the chosen page.
`hrefPattern`	`string`		Pages as links, like `"/orders?page={page}"`.
`onLoadMore / loading`	`() => void / boolean`		For the load-more style.
`numerals`	`"latn" \| "arab"`		Numeral system; defaults to `KanzProvider`'s.

Prop	Type	Default	Description
`count / current`	`number`		How many slides, and the current one (from 0).
`onCurrentChange`	`(index: number) => void`		Makes each dot a button that moves to its slide.
`variant`	`"dot" \| "line"`	`"dot"`	Figma's Style.
`size`	`"md" \| "lg"`	`"md"`	Figma's Size.
`framed`	`boolean`	`false`	Figma's Framed: a blurred pill for use over images.

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Through the arrows, the page numbers and the more-pages button.
`EnterSpace`	Goes to the page, or opens the menu of hidden pages.

A nav named "Pagination" in the page language; the current page has aria-current="page".
The arrows are named "Previous page" and "Next page" and turn off at the ends.
Decorative dots come with hidden text "Slide 1 of 3"; dots as buttons are named "Go to slide 2".

Numerals: Page numbers and "Page 3 of 20" follow the numerals setting (0-9 or ٠-٩).
Arabic typography: body-14 Medium.