Pagination

Square pagination controls that match the console toolbar aesthetic with monospaced labels and high-contrast active states.

Paged list

Activity pages
Links feel identical to the rest of the Omni controls and keep the zero-radius framing.

Active pages invert colors while hover and focus states echo the rest of the dashboard.

Installation

pnpm dlx shadcn@latest add @omni/pagination

Usage

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#">Prev</PaginationPrevious>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">01</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink isActive href="#">
        02
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">12</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#">Next</PaginationNext>
    </PaginationItem>
  </PaginationContent>
</Pagination>