How to Use Pagination in Next.js with Shadcn UI

Learn how to add pagination to your Next.js app using Shadcn UI. This quick guide will walk you through the essentials of implementing smooth and functional pagination.

How to Install Shadcn UI in Next.js Project

Before using pagination in Next.js with Shadcn UI, you need to install shadcn-ui and add the Button component.

npx shadcn-ui add button
#or
npx shadcn-ui@latest add

1. Create next js with shadcn ui simple paginations using shadcn-ui Button component.

import { Button } from "@/components/ui/button"

export default function PaginationDemo() {
  return (
    <>
      <div>
        <Button variant="outline" size="sm">
          1
        </Button>
        <Button variant="outline" size="sm">
          2
        </Button>
        <Button variant="outline" size="sm">
          3
        </Button>
      </div>
    </>
  )
}

2. Next js with shadcn ui full rounded paginations.

import { Button } from "@/components/ui/button"

export default function PaginationDemo() {
  return (
    <>
      <div>
        <Button variant="outline" className="rounded-full" size="sm">
          1
        </Button>
        <Button variant="outline" className="rounded-full" size="sm">
          2
        </Button>
        <Button variant="outline" className="rounded-full" size="sm">
          3
        </Button>
      </div>
    </>
  )
}

3. Next js with shadcn ui next page and previous paginations.

import { Button } from "@/components/ui/button"

export default function PaginationDemo() {
  return (
    <>
      <div className="space-x-2">
        <Button variant="outline" size="sm">
          Previous
        </Button>
        <Button variant="outline" size="sm">
          Next
        </Button>
      </div>
    </>
  )
}

4. Next js with shadcn ui paginations using map functions.

import { Button } from "@/components/ui/button"

export default function PaginationDemo() {
  const buttonData = [1, 2, 3, 4, 5]
  return (
    <>
      <div>
        {buttonData.map((number) => (
          <Button
            key={number}
            variant="outline"
            size="sm"
            className="rounded-full"
          >
            {number}
          </Button>
        ))}
      </div>
    </>
  )
}

5. Next js with shadcn ui paginations using Button component and nextjs Link.

import Link from "next/link"

import { buttonVariants } from "@/components/ui/button"

export default function PaginationDemo() {
  const buttonData = [1, 2, 3, 4, 5]
  return (
    <>
      <div>
        {buttonData.map((number) => (
          <Link
            key={number}
            className={buttonVariants({ variant: "outline" })}
            href={""}
          >
            {number}
          </Link>
        ))}
      </div>
    </>
  )
}

Now, Shadcn UI officially supports a pagination component.

npx shadcn-ui@latest add pagination

Create Shadcn UI pagination using the PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, and PaginationPrevious components.

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

export default function PaginationDemo() {
  return (
    <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>
  )
}

Aaronn