Pagination: The Only List That Search Engines Can Page Through.

Create numbered pagination for a product grid: Prev and Next buttons plus a windowed range showing up to five page numbers centered on the current page, collapsing distant ranges into ellipses while first and last stay visible. The current page gets aria-current="page", a filled indigo-600 background and white text; Prev is disabled on page one and Next on the last page, using aria-disabled, with no wrap-around. Each page is a real anchor to /products?page=n so every page is crawlable and shareable, with scroll reset to the grid top on change. Style 40px square buttons, rounded-lg, zinc-200 borders, hover zinc-50, visible focus-visible rings, and a "1–24 of 312" results line on the left. Collapse the window to three pages plus ellipses under 640px.

Create a load-more pagination control for a photo gallery. A full-width centered button beneath the grid reads "Load more (24 of 180 shown)" and refetches the next 24 items, appending them to the existing list rather than replacing it. Show a brief spinner inside the button during fetch, then update the count label; disable the button and change it to "All 180 loaded" at the end. After each load, move focus to the first newly added item so keyboard users are not stranded, and push the loaded count into the URL query so refreshing keeps the same depth. Use React state for the items array, Tailwind for a ghost-style button that fills with zinc-900 on hover, and skeleton placeholders in the grid while loading.

Create a Next/Previous pagination control wired to a cursor-based API. Two buttons only — no numbered pages, since cursors cannot jump. Next fetches the next page with the returned cursor and Previous uses the kept cursor of the prior page from a small history stack. Persist the current cursor in the URL search params so a shared link restores the exact page, and disable Previous on the first page and Next when the API reports no more results. Include a subtle "Page unknown — cursor mode" results hint and a data-count line showing items on the current page. Style as a right-aligned pair with primary Next and outline Previous, plus focus rings and a 150ms opacity transition on the disabled state.

Create server-rendered pagination for a blog archive where each page is fully crawlable: real anchor tags to /blog?page=n, page numbers rendered in the initial HTML without JavaScript, and no client-only fetching. Generate a per-page title and meta description ("Page 3 of 12 — Essay Archive"), a canonical tag on each page that includes the page parameter so pages do not collapse into one canonical, and rel prev and next link tags on adjacent pages. Include BreadcrumbList-style signals by keeping the archive route stable, render the item list server-side at 10 per page, and keep the pagination controls in the footer of each page so crawlers reach every page by following links alone.