Layout UI

Pagination

Server-compatible pagination controls. Page links use buttonVariants for consistent sizing and hover states. PaginationEllipsis handles collapsed page ranges.

Preview

Installation

bash
npx shadcn@latest add @layout/pagination

Usage

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

Examples

With ellipsis

Guidelines for AI agents

Render as anchor tags with href pointing to the page URL (e.g. /posts?page=3) for server-side navigation. Mark the current page with isActive. Use PaginationEllipsis between non-adjacent page numbers.

Never

  • Neveruse onClick-only pagination without href; it breaks browser history and deep linking
  • Nevermark more than one page link as isActive
  • Neverput pagination inside the main content scroll area; keep it below or above
  • Neverhardcode colours on page links; they inherit from buttonVariants token utilities

Tokens consumed

--layout-border--layout-accent--layout-accent-fg--layout-radius--layout-duration-base