next 13 with shadcn ui pagination example

In this tutorial, we will create paginations in next js 13 with shadcn ui. First you need to setup next js 13 with shadcn ui project.

how to use shadcn ui in next js 13

Before use pagination in next js 13 with shadcn ui you need to install npx shadcn-ui add button.

npx shadcn-ui add button

npx shadcn-ui@latest add

Next 13 with Shadcn UI Pagination Example

1. Create next js 13 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>
    </>
  )
}

shadcn ui pagination

2. next js 13 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>
    </>
  )
}

shadcn ui full rounded pagination

3. next js 13 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>
    </>
  )
}

shadcn ui next page and previous pagination

4. next js 13 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>
    </>
  )
}

shadcn ui paginations using map functions

5. next js 13 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 PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink,PaginationNext, PaginationPrevious, component.

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>
  )
}