Navigation & structure

Pagination

Q: How do people describe a Pagination in plain words?

the 1 2 3 … Next controls under a long list buttons to jump to the next page of results how I move through search results page by page

Q: How do I implement a Pagination?

Add pagination under the results table: previous/next, numbered pages with ellipsis for large ranges, aria-current on the active page, and update the URL ?page= query when the page changes.

Controls that split large result sets into numbered pages.

Also known as page controls · pager · next/previous

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Pagination".

Add pagination under the results table: previous/next, numbered pages with ellipsis for large ranges, aria-current on the active page, and update the URL ?page= query when the page changes.

Anatomy:
- page items: Numbered buttons; ellipsize long ranges.
- previous / next: Always available when more pages exist; disable at ends.

Preferred API / pattern: `shadcn Pagination patterns`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Page change loses filter state
○Avoid: Only infinite scroll with no way to jump
○Avoid: Missing disabled state on Prev at page 1.

In plain wordsHow people search for it

“the 1 2 3 … Next controls under a long list”“buttons to jump to the next page of results”“how I move through search results page by page”

AnatomyOpen for part names

page items: Numbered buttons; ellipsize long ranges.
previous / next: Always available when more pages exist; disable at ends.

How to write itOpen for stack patterns

Web (HTML/CSS)nav with page links / aria-label

React + Tailwind + shadcn/uishadcn Pagination patterns

SwiftUIcustom page controls + .searchable lists

Ant Design<Pagination>

Notes

Pagination suits known totals and shareable page URLs. Infinite scroll can feel smoother but hurts deep linking and footers. Show total when known. Keep the current page obvious and don't reset scroll without reason.

Common mistakesHumans and models trip here

Page change loses filter state: keep query params in the URL.
Only infinite scroll with no way to jump: power users can't share page 12.
Missing disabled state on Prev at page 1.

More failure symptoms on AI broke it.

Related patterns

Data TableA grid of rows and columns for comparing structured records.Empty StateA deliberate screen when a list or view has no items—guidance, not a blank void.BreadcrumbA trail of links showing the path from the root to the current page.

Spotted a wrong name or missing pattern?

Message on X