Pagination

Code

import { useState } from "react";import { Pagination } from "@fadymondy/nasaq/web";export function Results() {  const [page, setPage] = useState(1);  return <Pagination page={page} pageCount={24} onPageChange={setPage} />;}

Navigation · beta

Live examples and controls: Pagination in the lab.

InstallCopy Anchor Link

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 useCopy Anchor Link

• 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 useCopy Anchor Link

• Fewer than about 20 items: show them all.
• Steps in a flow: use a stepper.

ImportCopy Anchor Link

import { CursorPager, LoadMore, Pagination } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { useState } from "react";
import { Pagination } from "@fadymondy/nasaq/web";

export function Results() {
  const [page, setPage] = useState(1);
  return <Pagination page={page} pageCount={24} onPageChange={setPage} />;
}

AnatomyCopy Anchor Link

<Pagination>   <nav data-slot="pagination" aria-label>
└─ ul > li     previous · page buttons (aria-current="page") · ellipsis (data-slot="pagination-ellipsis") · next
<CursorPager>  <nav data-slot="cursor-pager">  summary text + previous / next buttons
<LoadMore>     data-slot="load-more"  (a Button)

APICopy Anchor Link

Pagination (PaginationProps)Copy Anchor Link

getPaginationItems(page, pageCount, siblings?, boundaries?) returns (number | "start-ellipsis" | "end-ellipsis")[].

CursorPager (CursorPagerProps)Copy Anchor Link

LoadMoreCopy Anchor Link

All Button props (loading, variant, onClick). Default variant secondary, default text "Load more" / "تحميل المزيد".

ExamplesCopy Anchor Link

Cursor pager:

import { CursorPager } from "@fadymondy/nasaq/web";

export function Pager() {
  return (
    <CursorPager from={21} to={40} total={95} hasPrevious hasNext onPrevious={() => {}} onNext={() => {}} />
  );
}

Load more with loading state:

import { useState } from "react";
import { LoadMore } from "@fadymondy/nasaq/web";

export function More() {
  const [loading, setLoading] = useState(false);
  return <LoadMore loading={loading} onClick={() => setLoading(true)} />;
}

AccessibilityCopy Anchor Link

• Each control is a nav landmark with a label; the current page has aria-current="page". Page buttons are named "Page N".
• Labels default to English or Arabic from the Nasaq locale; pass your own for other languages.

RTL & i18nCopy Anchor Link

Chevrons are directional icons and mirror in RTL, so "previous" points right in Arabic. Page numbers and the "showing" range are formatted with Nasaq number formatting (Western digits) and the range is bidi-isolated.

Styling & tokensCopy Anchor Link

Buttons use Button variants; the current page uses border-primary and bg-nq-selected. className merges onto the nav.

Do / Don'tCopy Anchor Link

• Do keep the current page announced with aria-current.
• Don't use it for fewer than a screenful of items.

RelatedCopy Anchor Link

button, data-table.

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-navigation-pagination--docs