Pagination

Pagination with page navigation, next and previous links.

import {
  Pagination,
  PaginationContent,

Installation


pnpm dlx shadcn@latest add https://ui.tyap.me/r/styles/base/pagination.json
npx shadcn@latest add https://ui.tyap.me/r/styles/base/pagination.json
yarn dlx shadcn@latest add https://ui.tyap.me/r/styles/base/pagination.json
bunx --bun shadcn@latest add https://ui.tyap.me/r/styles/base/pagination.json

Copy and paste the following code into your project.

components/ui/pagination.tsx

import * as React from "react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"

const ACTIVE_CSS = `
[data-slot="pagination-link"][data-active="true"] {
  transition:
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@starting-style {
  [data-slot="pagination-link"][data-active="true"] {
    background-color: transparent;
    color: inherit;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-slot="pagination-link"][data-active="true"] { transition: none !important; }
}
`

function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
  return (
    <>
      <style href="pagination-active" precedence="component">
        {ACTIVE_CSS}
      </style>
      <nav
        role="navigation"
        aria-label="pagination"
        data-slot="pagination"
        className={cn(
          "mx-auto flex w-full justify-center",
          className
        )}
        {...props}
      />
    </>
  )
}

function PaginationContent({
  className,
  ...props
}: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="pagination-content"
      className={cn("flex items-center gap-1", className)}
      {...props}
    />
  )
}

function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />
}

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, "size"> &
  React.ComponentProps<"a">

function PaginationLink({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) {
  return (
    <Button
      variant="ghost"
      size={size}
      className={cn(isActive && "bg-muted! font-medium", className)}
      nativeButton={false}
      render={
        <a
          aria-current={isActive ? "page" : undefined}
          data-slot="pagination-link"
          data-active={isActive}
          {...props}
        />
      }
    />
  )
}

function PaginationPrevious({
  className,
  text: _text = "Previous",
  ...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
  return (
    <PaginationLink
      aria-label="Go to previous page"
      size="icon"
      className={cn(className)}
      {...props}
    >
      <ChevronLeftIcon className="cn-rtl-flip" />
    </PaginationLink>
  )
}

function PaginationNext({
  className,
  text: _text = "Next",
  ...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
  return (
    <PaginationLink
      aria-label="Go to next page"
      size="icon"
      className={cn(className)}
      {...props}
    >
      <ChevronRightIcon className="cn-rtl-flip" />
    </PaginationLink>
  )
}

function PaginationEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      aria-hidden
      data-slot="pagination-ellipsis"
      className={cn(
        "flex size-9 items-center justify-center text-muted-foreground",
        className
      )}
      {...props}
    >
      <MoreHorizontalIcon
      />
      <span className="sr-only">More pages</span>
    </span>
  )
}

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}

Update the import paths to match your project setup.

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>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Composition

Use the following composition to build a Pagination:

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext

Examples

Simple

A simple pagination with only page numbers.

import {
  Pagination,
  PaginationContent,

Icons Only

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.

Rows per page

import { Field, FieldLabel } from "@/components/ui/field"
import {
  Pagination,

Next.js

By default the <PaginationLink /> component will render an <a /> tag.

To use the Next.js <Link /> component, make the following updates to pagination.tsx.

+ import Link from "next/link"
 
- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>
 
const PaginationLink = ({...props }: ) => (
  <PaginationItem>
-   <a>
+   <Link>
      // ...
-   </a>
+   </Link>
  </PaginationItem>
)

Note: We are making updates to the cli to automatically do this for you.

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

Changelog

RTL Support

If you're upgrading from a previous version of the Pagination component, you'll need to apply the following updates to add the text prop:

Update `PaginationPrevious`.

  function PaginationPrevious({
    className,
+   text = "Previous",
    ...props
- }: React.ComponentProps<typeof PaginationLink>) {
+ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
    return (
      <PaginationLink
        aria-label="Go to previous page"
        size="default"
        className={cn("cn-pagination-previous", className)}
        {...props}
      >
        <ChevronLeftIcon />
        <span className="cn-pagination-previous-text hidden sm:block">
-         Previous
+         {text}
        </span>
      </PaginationLink>
    )
  }

Update `PaginationNext`.

  function PaginationNext({
    className,
+   text = "Next",
    ...props
- }: React.ComponentProps<typeof PaginationLink>) {
+ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
    return (
      <PaginationLink
        aria-label="Go to next page"
        size="default"
        className={cn("cn-pagination-next", className)}
        {...props}
      >
-       <span className="cn-pagination-next-text hidden sm:block">Next</span>
+       <span className="cn-pagination-next-text hidden sm:block">{text}</span>
        <ChevronRightIcon />
      </PaginationLink>
    )
  }

Navigation Menu Phone Input

On This Page

Installation Usage Composition Examples Simple Icons Only Next.js RTL Changelog RTL Support

Pagination

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Update PaginationPrevious.

Update PaginationNext.

Update `PaginationPrevious`.

Update `PaginationNext`.