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>
</>
)
}
![shadcn ui pagination](https://frontendshape.com/wp-content/uploads/2024/07/PvxFmZe8R4UDMM6Wlxm7VTyyVvBI5UZc3jOGAN9p.png)
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>
</>
)
}
![full rounded pagination](https://frontendshape.com/wp-content/uploads/2024/07/bOkHdFn4mdlULBw9hF1ZxNv5CMk06xY5HTzzBUdb.png)
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>
</>
)
}
![next previous pagination](https://frontendshape.com/wp-content/uploads/2024/07/M2P9eT3i3nyeqqH6jkGup00RUSAz5CE1BIdO8vla.png)
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>
</>
)
}
![paginations using map functions](https://frontendshape.com/wp-content/uploads/2024/07/rpydebxcDnzcs9d1qg7duTdvYWFGGtEDq79CR8iy.png)
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>
)
}
![shadcn ui pagination component](https://frontendshape.com/wp-content/uploads/2024/07/ON4pop47nWjeH9XsH4jXhr2tjf6kWoqrRLxCC7wl.png)