Pagination

Component

About

Pagination with ellipses and a range summary that turns into "Page 6 of 24" below 640px, plus a compact variant. Part of the Layro System: layro.vercel.app.

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

Code

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

Usage.tsx

import * as React from "react";
import { Pagination } from "@/components/ui/layro-pagination";

/* The pages around the current one, with ellipses and a range summary.
   Below 640px the numbers give way to "Page 6 of 24" on their own, and a
   compact variant does the same anywhere. */

export default function PaginationDemo() {
  const [page, setPage] = React.useState(6);
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 580 }}>
        <h2 className="text-[16px] font-semibold tracking-[-0.01em]">Invoices</h2>
        <div className="mb-5" />
        <p className="mb-4 text-[13px] text-muted-foreground" aria-live="polite">Showing invoices {(page - 1) * 20 + 1}–{Math.min(page * 20, 473)}.</p>
        <Pagination label="Invoices" page={page} pageCount={24} onPageChange={setPage} total={473} pageSize={20} />
        <Pagination className="mt-4" label="Invoices, compact" page={page} pageCount={24} onPageChange={setPage} compact />
      </div>
    </div>
  );
}