Pagination

Page navigation for long lists.

stable

Preview

Code

tsx

import {
  Pagination, PaginationContent, PaginationEllipsis,
  PaginationItem, PaginationLink, PaginationNext, PaginationPrevious,
} from "@/components/ui/pagination";

export function Example() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
        <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
        <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
        <PaginationItem><PaginationEllipsis /></PaginationItem>
        <PaginationItem><PaginationNext href="#" /></PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Props

Prop	Type	Default	Description
page	`number`	—	Current page (1-indexed).
totalPages	`number`	—	Total number of pages.
onPageChange	`(page: number) => void`	—	Called when the user changes pages.
siblingCount	`number`	1	Pages shown adjacent to the current.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/pagination.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
import type { ComponentPropsWithoutRef } from "react";

export function Pagination({ className, ...props }: ComponentPropsWithoutRef<"nav">) {
  return (
    <nav
      aria-label="Pagination"
      className={cn("mx-auto flex w-full justify-center", className)}
      {...props}
    />
  );
}

export function PaginationContent({ className, ...props }: ComponentPropsWithoutRef<"ul">) {
  return <ul className={cn("flex flex-row items-center gap-1", className)} {...props} />;
}

export function PaginationItem({ className, ...props }: ComponentPropsWithoutRef<"li">) {
  return <li className={cn("", className)} {...props} />;
}

const pageButtonBase = cn(
  "inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors",
  "focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-accent",
  "disabled:pointer-events-none disabled:opacity-50",
);

export function PaginationLink({
  className,
  isActive,
  ...props
}: ComponentPropsWithoutRef<"a"> & { isActive?: boolean }) {
  return (
    <a
      aria-current={isActive ? "page" : undefined}
      className={cn(
        pageButtonBase,
        isActive
          ? "border border-border bg-bg text-fg font-semibold"
          : "text-fg-muted hover:bg-bg-muted hover:text-fg",
        className,
      )}
      {...props}
    />
  );
}

export function PaginationPrevious({ className, ...props }: ComponentPropsWithoutRef<"a">) {
  return (
    <a
      aria-label="Go to previous page"
      className={cn(
        pageButtonBase,
        "gap-1 text-fg-muted hover:bg-bg-muted hover:text-fg",
        className,
      )}
      {...props}
    >
      <ChevronLeft className="h-4 w-4" />
      <span>Previous</span>
    </a>
  );
}

export function PaginationNext({ className, ...props }: ComponentPropsWithoutRef<"a">) {
  return (
    <a
      aria-label="Go to next page"
      className={cn(
        pageButtonBase,
        "gap-1 text-fg-muted hover:bg-bg-muted hover:text-fg",
        className,
      )}
      {...props}
    >
      <span>Next</span>
      <ChevronRight className="h-4 w-4" />
    </a>
  );
}

export function PaginationEllipsis({ className, ...props }: ComponentPropsWithoutRef<"span">) {
  return (
    <span
      aria-hidden
      className={cn("flex h-9 w-9 items-center justify-center text-fg-muted", className)}
      {...props}
    >
      <MoreHorizontal className="h-4 w-4" />
      <span className="sr-only">More pages</span>
    </span>
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmPagination (extends HBox). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmPagination;

PrizmPagination(int pageCount)

Prop	Type	Default	Description
setCurrent	`(int) → void`	—	Set the active page (fires onPageChange).
getCurrent	`() → int`	—	The active page (1-based).
setOnPageChange	`(IntConsumer) → void`	—	Called when the page changes.

Composite of Previous / numbered pages / Next PrizmButtons (active outlined, others ghost). Shows all pages (no ellipsis). Mirrors components/ui/pagination.tsx.