Pagination

Playground#

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

<PxPagination total={24} defaultPage={5} />

Installation#

pnpm dlx shadcn@latest add @lumesec/px-pagination

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/px-pagination.json

Usage#

"use client";

import * as React from "react";

import { PxPagination } from "@/components/lumesec/px-pagination";

export function Example() {
  const [page, setPage] = React.useState(5);
  return <PxPagination total={24} page={page} onPageChange={setPage} />;
}

Behaviour#

Page buttons with ellipses, where the current-page block slides to the page you pick.

API reference#

Props#

Also accepts every prop of <nav> (React.ComponentProps<"nav">), spread onto the root element.

Ref#

ref points at the root HTMLElement.

Accessibility#

• The root is a <nav> with aria-label="Pagination" (pass aria-label to change it).
• Page buttons are native buttons labelled "Page N"; the current one has aria-current="page".
• The previous and next buttons are labelled "Previous page" and "Next page" and are disabled at the ends.
• Ellipses are aria-hidden. After a pick, focus stays on the pressed button, so Next can be pressed repeatedly; when that button becomes disabled (Next on the last page), focus moves to the new current page.
• Reduced motion: the current-page block jumps instead of sliding.

Theming#

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --lumesec, --lumesec-foreground, --foreground and --muted-foreground.

Notes#

• Up to seven pages are all shown. Beyond that it shows the first and last page, a window around the current page and ellipses.
• It does not navigate or load data; handle onPageChange.