Compact Pagination

A dense pagination control for navigating pages with a jump-to-page input, first/last shortcuts, or a simple prev/next counter, sized from small to extra-large.

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

import PaginationCompact from "@/components/ui/pagination-compact";

export default function PaginationCompactDemo() {
  return (
    <div className="flex items-center justify-center p-10">
      <PaginationCompact total={12} defaultPage={5} />
    </div>
  );
}