Pagination

Preview

Design guidance

Use numbered pagination when people need to return to a specific page. Use load more to extend results without changing pages.

Controls use the shared 32px default size and expand to a 44px minimum on touch devices. The current page has a smaller number container and exposes aria-current="page". Navigation, arrow buttons and jump controls have accessible names.

Installation

npx shadcn@latest add https://ghost-ui.com/r/pagination.json

Basic usage

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

export default function ResultsPages() {
  const [page, setPage] = useState(1);
  return <Pagination page={page} pageCount={8} onPageChange={setPage} />;
}

Structures

Pagination owns the navigation controls and ellipsis editor. The caller owns the current page, result records and total page count. Compose Select beside it for page size, or Button for load more. These examples keep counts and page state in the caller.

Pagination.Navigation renders adjacent native links from caller-supplied destinations and names.

Examples

Numbered

Keep the current page visible with a bounded window of page numbers.

Ellipsis to input

Click either ellipsis to replace it with a page field. The field accepts whole digits only. Enter goes to a page from 1 to the total; Escape cancels and returns focus. An out-of-range value keeps the field open with an error.

Load more

Keep the current results in place. The loaded count updates after each batch; the action is disabled when all items are shown.

Page size

Choose how many items to show per page. Changing the size resets to the first page and updates the range and page count.

Also install Select for this example.

Compact

Pair named Previous and Next actions with the current page and total.

Previous and next

Move between bounded pages with arrow controls.

Adjacent pages

Navigate to named pages with native links. Omit a destination at either boundary.

API reference