Pagination

Preview

'use client';

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '@/registry/san-francisco/ui/pagination';

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

Installation

bun

bunx shadcn@latest add @sft-ui/pagination

API Reference

Pagination

The root <nav> container with aria-label="pagination".

PaginationContent

A <ul> that holds the pagination items.

PaginationItem

A <li> wrapper for each pagination element.

PaginationLink

A page number link rendered as a Button.

Prop	Type	Default	Description
`isActive`	`boolean`	—	Highlights the link as the current page.
`size`	`Button` size	`"icon"`	The button size variant.

All standard <a> attributes are supported.

PaginationPrevious

A styled link to the previous page.

Prop	Type	Default	Description
`text`	`string`	`"Previous"`	Label text shown beside the chevron icon.

PaginationNext

A styled link to the next page.

Prop	Type	Default	Description
`text`	`string`	`"Next"`	Label text shown beside the chevron icon.

PaginationEllipsis

A non-interactive indicator for omitted pages.