Pagination

The Pagination component provides accessible page navigation controls with page links, next/previous actions, and ellipsis indicators.

Usage

import { Pagination } from "@/components/ui/pagination";

export function ExamplePagination() {
  return (
    <Pagination.Root>
      <Pagination.Content>
        <Pagination.Item>
          <Pagination.Previous href="#" />
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">1</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#" isActive>
            2
          </Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Link href="#">3</Pagination.Link>
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Ellipsis />
        </Pagination.Item>
        <Pagination.Item>
          <Pagination.Next href="#" />
        </Pagination.Item>
      </Pagination.Content>
    </Pagination.Root>
  );
}

Preview

Custom Styling

Customize pagination link shapes, active indicators, or ring highlights via className:

<Pagination.Link href="#" isActive className="bg-indigo-600 text-white shadow-md shadow-indigo-500/25 border-0">
  1
</Pagination.Link>

Styling & Class Names

Target internal pagination CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.pagination`	Root nav	Root navigation element.
`.pagination__content`	Content list	Flex list wrapper for page items.
`.pagination__item`	List item	Individual item list container.
`.pagination__link`	Page button/link	Page button or link element.
`.pagination__ellipsis`	Ellipsis indicator	Spacing dots element.

Anatomy

<Pagination.Root>
  <Pagination.Content>
    <Pagination.Item>
      <Pagination.Previous />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Ellipsis />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Next />
    </Pagination.Item>
  </Pagination.Content>
</Pagination.Root>

API Reference

Pagination.Root Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Visual size of the component.

Pagination.Link Props

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Sets active styling and `aria-current="page"` attribute.

Pagination

On this page