Pagination

Controls for navigating between pages of content.

navigationinteractive

Loading preview...

Installation

npx baseui-cn add pagination

The CLI installs styles/navigation.styles.css alongside the component. For manual installation, copy that stylesheet from the registry and keep the component import. It uses the existing semantic theme variables.

Usage

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

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        1
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Examples

Standard

Use this when you want a full page range with previous and next controls.

Loading preview...

With ellipsis

Collapse long page ranges while keeping the active page and edge pages visible.

Loading preview...

Compact

A tighter pattern for drawers, dialogs, or dense toolbars where you only need the current page context.

Loading preview...

API

PaginationLink

Prop	Type	Default	Description
`isActive`	`boolean`	—	Marks the link as the current page and applies outline styling
`size`	`ButtonSize`	`"icon"`	Size forwarded to the underlying `Button`