Discovery

Pagination

Accessible page navigation with previous and next controls and a truncated page range with ellipses. Renders nothing for a single page.

pagination

navigation

accessible

Preview

Run the shadcn CLI. Dependencies and the shared lib block come with it.

npx shadcn add pagination

Import

import { Pagination } from "@/components/lumo/pagination"

Example

const [page, setPage] = useState(1)

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

Prop	Type	Default	Required
page	number	-	Required
pageCount	number	-	Required
onPageChange	(page: number) => void	-	Required
siblingCount	number	1

All props accept standard HTML attributes unless otherwise specified.

npm packages

lucide-react

Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.