Faber UI
Components

Pagination

Navigation for paginated content.

Pagination renders a navigation control for paginated content, with previous and next links and numbered pages.

Installation

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/pagination.json

Usage

typescript
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

export default function Example() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Examples

Default

API

Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.

PartBuilt onProps
Paginationdata-slot="pagination"<nav>HTML—
PaginationContentdata-slot="pagination-content"<ul>HTML—
PaginationItemdata-slot="pagination-item"<li>HTML—
PaginationPreviousPaginationLinkFaber UI
  • text? = "Previous"string
PaginationNextPaginationLinkFaber UI
  • text? = "Next"string
PaginationEllipsisdata-slot="pagination-ellipsis"<span>HTML—

Changelog

  1. v0.3.0BreadcrumbEllipsis and PaginationEllipsis expose their "More" labels to screen readers.patch
Full Pagination history

Last updated on

On this page