Glass Pagination

Navigation

About

A pill-style pagination control with glassy ghost-circle buttons for navigating between pages of content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Pagination to your project and fits it to your theme.

Code

How Glass Pagination is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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