Components
Loading preview...
Pagination with page navigation, next and previous links.
npx shadcn@latest add https://21st.dev/r/shadcn/paginationimport {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
} from "@/components/ui/pagination";
export function Seperate() {
return (
<Pagination className="container flex items-center justify-between">
<p className="hidden text-sm font-medium md:block">Showing 2 of 25</p>
<PaginationContent>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" isActive>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">8</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">9</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
</PaginationItem>
</PaginationContent>
</Pagination>
);
}