Pagination

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/pagination.json
Copy

Usage

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

Copy<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Composition

Use the following composition to build a Pagination:

CopyPagination
└── PaginationContent
    └── PaginationItem
        ├── PaginationPrevious
        ├── PaginationLink
        ├── PaginationEllipsis
        └── PaginationNext

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";
import {
  Pagination,

API Reference

Pagination

The Pagination component is the root nav element that wraps the pagination.

PaginationContent

The PaginationContent component is the ul list that holds the pagination items.

PaginationItem

The PaginationItem component wraps an individual pagination control.

PaginationLink

The PaginationLink component renders a clickable page link.

PaginationPrevious

The PaginationPrevious component renders the "previous page" link.

PaginationNext

The PaginationNext component renders the "next page" link.

PaginationEllipsis

The PaginationEllipsis component displays an ellipsis indicator for skipped pages.