Pagination

Links to the pages of a paged list. Presentational: the app supplies each link's href (or click handler) and marks the current page; `paginationRange(page, count, siblings)` from @nuecrea/core works out which page numbers and ellipses to show.

Installation

npx nuecrea-ui add pagination

Usage

import { paginationRange } from '@nuecrea/core';
import * as Pagination from '@/components/ui/pagination';

function Pager({ page, count }: { page: number; count: number }) {
  return (
    <Pagination.Root>
      <Pagination.List>
        <Pagination.Item>
          <Pagination.Previous
            href={`#page-${page - 1}`}
            disabled={page === 1}
          />
        </Pagination.Item>
        {paginationRange(page, count).map((p, i) => (
          <Pagination.Item key={i}>
            {p === 'ellipsis' ? (
              <Pagination.Ellipsis />
            ) : (
              <Pagination.Link href={`#page-${p}`} active={p === page}>
                {p}
              </Pagination.Link>
            )}
          </Pagination.Item>
        ))}
        <Pagination.Item>
          <Pagination.Next
            href={`#page-${page + 1}`}
            disabled={page === count}
          />
        </Pagination.Item>
      </Pagination.List>
    </Pagination.Root>
  );
}

export default function PaginationStory() {
  return (
    <main className="grid justify-items-start gap-6">
      <Pager page={5} count={10} />
      <Pager page={1} count={10} />
      <Pager page={10} count={10} />
    </main>
  );
}

API reference

Pagination.Root

The navigation landmark. Renders <nav>.

Prop	Type	Default	Description
`aria-label`	`string`	`"Pagination"`	Names the landmark; translate it with the page.

Pagination.List

The list of links. Renders <ul>.

Pagination.Item

Holds one Link, Previous, Next or Ellipsis. Renders <li>.

Pagination.Link

A page number. React: `render={<NextLink href="…" />}` for client routing; Angular: put it on an <a routerLink>. Renders <a>.

Prop	Type	Default	Description
`active`	`boolean`	`false`	Marks the current page: sets aria-current=page and the outlined style.

Pagination.Previous

Link to the previous page. A chevron and "Previous" unless given children. Renders <a>.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	On the first page: sets aria-disabled, removes it from the tab order and ignores clicks.

Data attribute	Present when
`data-disabled`	disabled

Pagination.Next

Link to the next page. "Next" and a chevron unless given children. Renders <a>.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	On the last page: sets aria-disabled, removes it from the tab order and ignores clicks.

Data attribute	Present when
`data-disabled`	disabled

Pagination.Ellipsis

Stands for skipped pages; hidden from screen readers. Three dots unless given children. Renders <span>.