Skip to content
Components / Navigation

Pagination

Pages of a long collection.

@fabrials/ui
Loading state

Installation

  1. Import the control from @fabrials/ui, after setting the app up.

    TypeScript
    import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from "@fabrials/ui";
  2. Or install it under shadcn's name, so code that imports @/components/ui/pagination gets this control. See shims.

    npx shadcn@latest add @fabrials/pagination

API reference

Prop / exportTypeDescription
isActivebooleanMarks the current page.

Behavior

Prefer a cursor or "Load more" when page numbers mean nothing to the reader.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.