Introduction

Pagination helps users navigate through large sets of data split across multiple pages. It includes support for active states, disabled states, ellipsis, and size variants.

Installation

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

Usage

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

Examples

Default

PaginationDefault

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

export default function Component() {
  return (
    <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><PaginationNext href="#" /></PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

With Ellipsis

PaginationWithEllipsis

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

export default function Component() {
  return (
    <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><PaginationLink href="#">10</PaginationLink></PaginationItem>
        <PaginationItem><PaginationNext href="#" /></PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Sizes

PaginationSizes

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

export default function Component() {
  return (
    <div className="flex flex-col gap-4">
      <Pagination>
        <PaginationContent>
          <PaginationItem><PaginationLink href="#" size="sm">1</PaginationLink></PaginationItem>
          <PaginationItem><PaginationLink href="#" size="sm" isActive>2</PaginationLink></PaginationItem>
          <PaginationItem><PaginationLink href="#" size="sm">3</PaginationLink></PaginationItem>
        </PaginationContent>
      </Pagination>
      <Pagination>
        <PaginationContent>
          <PaginationItem><PaginationLink href="#" size="lg">1</PaginationLink></PaginationItem>
          <PaginationItem><PaginationLink href="#" size="lg" isActive>2</PaginationLink></PaginationItem>
          <PaginationItem><PaginationLink href="#" size="lg">3</PaginationLink></PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  );
}

Flat Variant

Use variant="flat" on Pagination for a borderless pagination style.

PaginationFlat

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

export function PaginationDefault() {
  return (
    <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>
          <PaginationNext href='#' />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

export function PaginationFlat() {
  return (
    <Pagination variant='flat'>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href='#' aria-label='Previous page'>
            <Label1 className='sr-only'>Previous</Label1>
          </PaginationPrevious>
        </PaginationItem>
        {['1', '2', '3', '4', '5', '6', '7', '8'].map(page => (
          <PaginationItem key={page}>
            <PaginationLink href='#' isActive={page === '4'}>
              {page}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationNext href='#' aria-label='Next page'>
            <Label1 className='sr-only'>Next</Label1>
          </PaginationNext>
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

export function PaginationWithEllipsis() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href='#' />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href='#'>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href='#'>2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href='#' isActive>
            3
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href='#'>8</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href='#' />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

export function PaginationSizes() {
  return (
    <div className='flex flex-col gap-4'>
      <Pagination size='sm'>
        <PaginationContent>
          <PaginationItem>
            <PaginationLink href='#'>1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href='#' isActive>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href='#'>3</PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
      <Pagination size='lg'>
        <PaginationContent>
          <PaginationItem>
            <PaginationLink href='#'>1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href='#' isActive>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href='#'>3</PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  );
}

API Reference

Pagination

Prop	Type	Default	Description
`variant`	`default \| flat`	`default`	Controls whether links are bordered or borderless
`size`	`sm \| md \| lg`	`md`	Applies a shared size to all pagination links

PaginationLink

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Highlights as the current page
`disabled`	`boolean`	`false`	Disables the link
`size`	`sm \| md \| lg`	inherits	Overrides the container size for a single item
`variant`	`default \| flat`	inherits	Overrides the container variant for a single item

Pagination

On this page