Pagination

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

Pagination

className

React.ComponentProps<"nav">

PaginationContent

className

React.ComponentProps<"ul">

PaginationEllipsis

className

React.ComponentProps<"span">

PaginationItem

All props are forwarded to the underlying primitive.

React.ComponentProps<"li">

PaginationLink

className
isActive
size = "icon"

PaginationLinkProps

PaginationNext

className

React.ComponentProps<typeof PaginationLink>

PaginationPrevious

className

React.ComponentProps<typeof PaginationLink>

Code

// owner: Sona
"use client";

import * as React from "react";

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

export default function PaginationExample() {
  const [page, setPage] = React.useState(2);

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            href="#"
            onClick={() => setPage((p) => Math.max(1, p - 1))}
          />
        </PaginationItem>
        {[1, 2, 3, 4].map((number) => (
          <PaginationItem key={number}>
            <PaginationLink
              href="#"
              isActive={page === number}
              onClick={() => setPage(number)}
            >
              {number}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">12</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" onClick={() => setPage((p) => p + 1)} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Pagination

Component preview

On this page

Command Palette