Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Pagination

Pagination

Pagination with page navigation, next and previous links.

Preview

  • Previous
  • 1
  • 2
  • 3
  • Next

Installation

Install the component

npx shadcn@latest add https://ui.saturation.io/r/pagination.json

Usage

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

Examples

With Ellipsis

  • Previous
  • 1
  • 2
  • 3
  • More pages
  • 8
  • 9
  • 10
  • Next

Simple

  • Previous
  • Next

API Reference

Pagination

The root pagination navigation component.

PaginationContent

Container for pagination items.

PaginationItem

Wrapper for individual pagination elements.

PaginationLink

A pagination link with optional active state.

isActive?: boolean - Whether the link represents the current page

PaginationPrevious

Previous page navigation button.

PaginationNext

Next page navigation button.

PaginationEllipsis

Ellipsis indicator for skipped pages.

On This Page

  • Preview
  • Installation
  • Usage
  • Examples
  • API Reference

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.