# Pagination > Numbered Pagination with ellipsis, CursorPager (previous/next with a "Showing X-Y" label) and LoadMore button with a loading state. Source: https://docs.nasaqui.com/components/pagination ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/pagination.json ``` Three ways to move through a long list. `Pagination` shows numbered pages with ellipsis. `CursorPager` has previous and next only and a "Showing X-Y" label, for APIs that use cursors. `LoadMore` is a button that appends the next batch. ## When to use - `Pagination`: the total is known and users jump to a page (tables, search results). - `CursorPager`: the API gives cursors and cannot jump. - `LoadMore`: feeds where continuing the list matters more than position. ## When not to use - Fewer than about 20 items: show them all. - Steps in a flow: use a stepper. ## Import ```tsx import { CursorPager, LoadMore, Pagination } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx import { useState } from "react"; import { Pagination } from "@fadymondy/nasaq/web"; export function Results() { const [page, setPage] = useState(1); return ; } ``` ## Anatomy ```