saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Pagination

Pagination

A navigation component for navigating through pages of content.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/pagination

Usage

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Examples

With Ellipsis

Loading...
Pagination with ellipsis.

Simple

Loading...
Previous/Next only.

API Reference

PropTypeDefaultDescription
classNamestring—Additional CSS classes.

On This Page

  • Installation
  • Usage
  • Examples
  • With Ellipsis
  • Simple
  • API Reference
  • Previous
  • 1
  • 2
  • 3
  • More pages
  • Next
  • Previous
  • 1
  • 2
  • 3
  • More pages
  • 8
  • 9
  • 10
  • Next
  • Previous
  • Next