Floating Pill Pagination

A pill-shaped pagination control where the active page indicator smoothly morphs between page numbers as the user navigates.

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

import FloatingPill from "@/components/ui/pagination-01";

export default function FloatingPillDemo() {
  return (
    <div className="flex items-center justify-center w-full h-screen">
      <FloatingPill />
    </div>
  );
}