Navigation & disclosure@neumorphism-ui/pagination

Pagination

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.

@neumorphism-ui/pagination

Registry JSON

Preview

Installation

npx shadcn@latest add @neumorphism-ui/pagination

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

<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><PaginationEllipsis /></PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

API Reference

Component	Prop	Type	Default	Description
`Pagination`	`aria-label`	`string`	`"pagination"`	The accessible name of the pagination navigation region.
`PaginationLink`	`href`required	`string`	`—`	The actual URL of the target page.
`PaginationLink`	`isActive`	`boolean`	`false`	Applies the current-page style and aria-current=page.
`PaginationPrevious / PaginationNext`	`children`	`React.ReactNode`	`"Previous" / "Next"`	Replaces the default navigation label.