Pagination

Navigation controls for moving through pages of content.

Import

tsx

import { Pagination, PaginationContent, PaginationItem, PaginationEllipsis, PaginationPrevious, PaginationNext } from '@tac-ui/web';

Playground

Interactively configure the Pagination props below.

Total Pages

Current Page

tsx

<Pagination>
  <PaginationContent>
    <PaginationPrevious />
    <PaginationItem>1</PaginationItem>
    <PaginationItem active>2</PaginationItem>
    <PaginationItem>5</PaginationItem>
    <PaginationNext />
  </PaginationContent>
</Pagination>

Default

Compose PaginationPrevious, PaginationItem, and PaginationNext inside a PaginationContent to build a standard page control. Set active on the current page item to highlight it.

tsx

<Pagination>
  <PaginationContent>
    <PaginationPrevious />
    <PaginationItem>1</PaginationItem>
    <PaginationItem active>2</PaginationItem>
    <PaginationItem>3</PaginationItem>
    <PaginationItem>4</PaginationItem>
    <PaginationItem>5</PaginationItem>
    <PaginationNext />
  </PaginationContent>
</Pagination>

With Ellipsis

Use PaginationEllipsis to collapse hidden page ranges when the total page count is large. Place ellipsis items between the boundary pages and the surrounding visible pages.

tsx

<Pagination>
  <PaginationContent>
    <PaginationPrevious />
    <PaginationItem>1</PaginationItem>
    <PaginationEllipsis />
    <PaginationItem>4</PaginationItem>
    <PaginationItem active>5</PaginationItem>
    <PaginationItem>6</PaginationItem>
    <PaginationEllipsis />
    <PaginationItem>10</PaginationItem>
    <PaginationNext />
  </PaginationContent>
</Pagination>

Glass

Set glass on PaginationContent to wrap the control group in a frosted-glass container, suitable for overlaying image or gradient backgrounds.

tsx

<Pagination>
  <PaginationContent glass>
    <PaginationPrevious />
    <PaginationItem>1</PaginationItem>
    <PaginationItem active>2</PaginationItem>
    <PaginationItem>3</PaginationItem>
    <PaginationNext />
  </PaginationContent>
</Pagination>

API Reference

Pagination props:

Prop	Type	Default	Description
label	string	"Pagination"	Accessible label for the pagination nav element, used by screen readers.
className	string	-	Additional CSS class names.

PaginationContent props:

Prop	Type	Default	Description
glass	boolean	false	Applies glassmorphism styling to the pagination container.
className	string	-	Additional CSS class names.

PaginationItem props:

Prop	Type	Default	Description
active	boolean	false	Highlights this item as the currently active page with a point-colored background.
disabled	boolean	false	Disables the page button, reducing opacity and blocking interaction.
children	React.ReactNode	-	Page number or label rendered inside the button.

PaginationEllipsis renders a collapsed indicator (...) for hidden page ranges and accepts no required props.