0

Pagination

PreviousNext

Pagination with page navigation, next and previous links.

import {
  Pagination,
  PaginationContent,

Installation

bunx --bun shadcn@latest add @ondo-ui/pagination

Usage

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
<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:

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

Examples

Simple

A simple pagination with only page numbers.

import {
  Pagination,
  PaginationContent,

Icons Only

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.

import { Field, FieldLabel } from "@/components/ui/field"
import {
  Pagination,

API reference

The component exports the following sub-components:

  • Pagination - The root container for pagination controls
  • PaginationContent - A wrapper for pagination items
  • PaginationItem - A container for individual pagination elements
  • PaginationLink - A clickable pagination link with optional active state
  • PaginationPrevious - A previous page button with icon
  • PaginationNext - A next page button with icon
  • PaginationEllipsis - An ellipsis indicator for skipped pages