Pagination

Page navigation controls with previous, next, page numbers, and ellipsis indicators — copy it into your project and own it completely.

Default

Sizes

With Ellipsis

Installation

npx visor add pagination

This copies two files into your project:

components/ui/pagination/pagination.tsx — the component
components/ui/pagination/pagination.module.css — the styles

Usage

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

export default function Example() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
        <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
        <PaginationItem><PaginationNext href="#" /></PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

API Reference

PaginationLink Props

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Marks a PaginationLink as the current page. Sets aria-current="page".
`size`	`'default' \| 'sm' \| 'lg'`	`'default'`	Size of PaginationLink buttons.
`href`*	`string`	—	URL for the pagination anchor link.
`className`	`string`	—	Additional CSS class names to merge onto the element.

Pagination renders a <nav> element and accepts all standard HTML nav attributes. PaginationPrevious and PaginationNext include built-in accessible labels.

Sub-components

Component	Element	Purpose
`Pagination`	`<nav>`	Root navigation container
`PaginationContent`	`<ul>`	List container for pagination items
`PaginationItem`	`<li>`	Wrapper for each page control
`PaginationLink`	`<a>`	Page number link with active state
`PaginationPrevious`	`<a>`	Previous page link with left arrow icon
`PaginationNext`	`<a>`	Next page link with right arrow icon
`PaginationEllipsis`	`<span>`	Visual gap indicator for skipped pages

Accessibility

Pagination renders a <nav> element with aria-label="pagination" and role="navigation".
PaginationLink sets aria-current="page" when isActive is true.
PaginationPrevious includes aria-label="Go to previous page" and PaginationNext includes aria-label="Go to next page".
PaginationEllipsis is hidden from assistive technology with aria-hidden="true" and includes a visually hidden "More pages" span for screen readers.
When implementing controlled pagination, update href values to reflect real page URLs, or use onClick handlers with href="#" for client-side routing.

Pagination

On this page