Neumorphism UI

Pagination

Use Pagination to move through a list or collection split across several pages.

Preview

Current page and neighbors

Switch locally among pages one to three and check the active page and previous/next boundary states without leaving the example.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/pagination

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Place page links inside PaginationContent and PaginationItem. Provide real destinations, mark the current page with isActive, and use an ellipsis for omitted pages.

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

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

API Reference

Composable pagination that preserves the semantics of nav, ul, li, and anchor. Provides an active page, previous and next links, and a collapsed-range indicator.

ComponentPropTypeDefaultDescription
Paginationaria-labelstring"pagination"The accessible name of the pagination navigation region.
PaginationLinkhrefrequiredstring—The actual URL of the target page.
PaginationLinkisActivebooleanfalseApplies the current-page style and aria-current=page.
PaginationPrevious / PaginationNextchildrenReact.ReactNode"Previous" / "Next"Replaces the default navigation label.

Accessibility

  • 01

    Each page should be a link with a real href to preserve browser navigation and opening in a new tab.

  • 02

    Set isActive on exactly one current page to apply aria-current=page.

  • 03

    Previous and Next include default aria-label values; override them when localization is required.