A pill-style pagination control with glassy ghost-circle buttons for navigating between pages of content.
import GlassPagination, {
GlassPaginationContent,
GlassPaginationItem,
GlassPaginationLink,
GlassPaginationPrevious,
GlassPaginationNext,
GlassPaginationEllipsis,
} from "@/components/ui/glass-pagination";
export default function GlassPaginationDemo() {
return (
<div className="flex min-h-[240px] w-full items-center justify-center bg-background p-10">
<GlassPagination>
<GlassPaginationContent>
<GlassPaginationItem>
<GlassPaginationPrevious href="#" />
</GlassPaginationItem>
<GlassPaginationItem>
<GlassPaginationLink href="#">1</GlassPaginationLink>
</GlassPaginationItem>
<GlassPaginationItem>
<GlassPaginationLink href="#" isActive>
2
</GlassPaginationLink>
</GlassPaginationItem>
<GlassPaginationItem>
<GlassPaginationLink href="#">3</GlassPaginationLink>
</GlassPaginationItem>
<GlassPaginationItem>
<GlassPaginationEllipsis />
</GlassPaginationItem>
<GlassPaginationItem>
<GlassPaginationLink href="#">8</GlassPaginationLink>
</GlassPaginationItem>
<GlassPaginationItem>
<GlassPaginationNext href="#" />
</GlassPaginationItem>
</GlassPaginationContent>
</GlassPagination>
</div>
);
}