Components

Pagination

Lets users navigate across pages of content with numbered links, previous and next controls, and a truncating ellipsis for long ranges.

Basic usage

Compose a Pagination from items, marking the current page with isActive.

Drop a PaginationEllipsis between distant page numbers to keep long ranges compact while always showing the first, last, and current pages.

Prop	Type	Default	Description
`Pagination`	React.ComponentProps<'nav'>	`—`	Root <nav> landmark with role="navigation" and aria-label="pagination".
`PaginationContent`	React.ComponentProps<'ul'>	`—`	The <ul> list that lays out the page items in a horizontal row.
`PaginationItem`	React.ComponentProps<'li'>	`—`	A single <li> wrapper for a link, previous/next control, or ellipsis.
`PaginationLink — isActive`	boolean	`false`	Marks the current page; sets aria-current="page" and the outline variant.
`PaginationLink — size`	'default' \| 'sm' \| 'lg' \| 'icon'	`'icon'`	Forwarded to the underlying button styling; controls link dimensions.
`PaginationLink — ...rest`	React.ComponentProps<'a'>	`—`	All native anchor props (href, onClick, etc.) are forwarded.
`PaginationPrevious`	PaginationLink props	`—`	Previous-page link with a chevron icon and "Go to previous page" label.
`PaginationNext`	PaginationLink props	`—`	Next-page link with a chevron icon and "Go to next page" label.
`PaginationEllipsis`	React.ComponentProps<'span'>	`—`	Non-interactive gap indicator (aria-hidden) with a "More pages" label.

The root renders a <nav> with role="navigation" and aria-label="pagination", exposing the control as a discoverable landmark.
The active page link sets aria-current="page" so assistive tech announces the user's current location.
PaginationPrevious and PaginationNext carry descriptive aria-labels, keeping the chevron-only controls readable to screen readers.
PaginationEllipsis is aria-hidden with a visually-hidden "More pages" label, so the decorative gap is skipped during navigation.