Components

Pagination

Page switcher: the active pill glides between numbers as a shared element on `springs.snap`, and the prev/next arrows nudge outward on hover.

The pill glides between numbers; long ranges fold into ellipses.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add pagination

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Pagination } from "@lumora/ui/components/pagination";
// or from the barrel:
import { Pagination } from "@lumora/ui";

Props worth knowing

count is the total number of pages; the active pill glides between numbers as a shared element. Works controlled via page/onPageChange or uncontrolled via defaultPage. siblingCount sets how many neighbors stay visible around the current page before the range collapses into ellipses — first and last are always pinned. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.