Components

Pagination

Page navigation with previous, next, page-number, and ellipsis sub-components. A standalone primitive: pair with any list, grid, or data view that needs page-by-page browsing. Renders semantic <nav>, <ul>, and <a> elements for full keyboard and screen-reader support.

Installation

terminal

npx shadcn@latest add @wuko/pagination

Usage

components/example.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>
  );
}

Composition

Use the following composition to build a Pagination.

text

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext

Simple

A pagination with only page numbers — no previous/next buttons, no ellipsis. Useful when the total page count is small enough to show all of them.

tsx

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        1
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">4</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">5</PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>

Icons only

Use only the previous and next buttons without page numbers. Useful in data tables paired with a rows-per-page selector, or when the current page is communicated elsewhere.

tsx

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Next.js

By default PaginationLink renders an <a> tag. To use the Next.js Link component for client-side navigation, update pagination.tsx to swap the underlying element.

tsx

import Link from "next/link";

// Update PaginationLink in pagination.tsx
type PaginationLinkProps = {
  isActive?: boolean;
  size?: "default" | "sm" | "icon";
} & React.ComponentProps<typeof Link>;

const PaginationLink = ({ className, isActive, size, ...props }: PaginationLinkProps) => (
  <Link
    aria-current={isActive ? "page" : undefined}
    className={...}
    {...props}
  />
);

Sub-components

Every sub-component forwards className and all native attributes for its underlying element.

Prop	Type	Default	Description
Pagination	ComponentProps<"nav">	—	The root <nav> element with role="navigation" and aria-label="pagination". Centers content horizontally.
PaginationContent	ComponentProps<"ul">	—	An unordered list that arranges items horizontally with a small gap. Renders as <ul>.
PaginationItem	ComponentProps<"li">	—	A single list item wrapping a Link, Previous, Next, or Ellipsis.
PaginationLink	{ isActive?: boolean; size?: "default" \| "sm" \| "icon" } & ComponentProps<"a">	size="icon"	An anchor link representing one page. Pass isActive to mark the current page (adds aria-current="page" and active styling).
PaginationPrevious	ComponentProps<typeof PaginationLink>	—	Previous-page link with chevron icon and "Previous" text. Accepts href and other anchor props.
PaginationNext	ComponentProps<typeof PaginationLink>	—	Next-page link with chevron icon and "Next" text. Accepts href and other anchor props.
PaginationEllipsis	ComponentProps<"span">	—	A non-interactive ellipsis indicating gaps in the page sequence. Includes screen-reader text "More pages".

Accessibility

Renders a native <nav> with role="navigation" and aria-label="pagination" so screen readers announce it as a navigation landmark.
The current page link uses aria-current="page", which screen readers announce when the user reaches it. Visually it gets a bordered, filled style to match.
PaginationPrevious and PaginationNext have descriptive aria-labels ("Go to previous page", "Go to next page") for screen-reader-only users.
PaginationEllipsis renders aria-hiddenfor its icon and includes screen-reader-only text "More pages" to convey the gap without visual noise.
All links are real <a> tags. Keyboard navigation (Tab, Shift+Tab, Enter) works without extra wiring.

← Previous

Modal

Select