Pagination

A row of pages as small slabs cut on both sides, nesting like the tabs; the current page is filled with the accent.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/pagination

Examples

Twelve pages

pagination-basic.tsx

import { useState } from "react";import {  Pagination,  PaginationContent,  PaginationEllipsis,  PaginationItem,  PaginationLink,  PaginationNext,  PaginationPrevious,} from "@/components/zero/pagination";const last = 12;export default function PaginationBasic() {  const [page, setPage] = useState(3);  const go = (to: number) => (event: React.MouseEvent) => {    event.preventDefault();    setPage(Math.min(last, Math.max(1, to)));  };  const shown = [1, page - 1, page, page + 1, last].filter(    (n, index, all) => n >= 1 && n <= last && all.indexOf(n) === index,  );  return (    <Pagination>      <PaginationContent>        <PaginationItem>          <PaginationPrevious href="#" onClick={go(page - 1)} />        </PaginationItem>        {shown.map((n, index) => (          <PaginationItem key={n} className="flex items-center gap-1">            {index > 0 && n - shown[index - 1] > 1 ? (              <PaginationEllipsis />            ) : null}            <PaginationLink href="#" isActive={n === page} onClick={go(n)}>              {n}            </PaginationLink>          </PaginationItem>        ))}        <PaginationItem>          <PaginationNext href="#" onClick={go(page + 1)} />        </PaginationItem>      </PaginationContent>    </Pagination>  );}

Behaviour

The other pages are ghosts that light when pointed at. Previous and next carry a chevron and their word, which hides on a phone. Which pages to show is yours to decide; PaginationEllipsis stands in for the gaps.

The links are anchors; render takes a router's link instead.

Props

PaginationLink

Prop	Type	Default	Description
isActive	boolean	false	The page being shown: filled with the accent, aria-current="page".
render	ReactElement	—	The element to render as, such as a router link.

PaginationPrevious, PaginationNext

Prop	Type	Default	Description
children	ReactNode	"Previous" / "Next"	The word beside the chevron.