---
title: "Pagination"
description: "The footer of a list: Pagination pages a list the browser holds (\"16–30 of 120\"); CursorPagination pages a server list that only knows whether another page exists. Both render nothing when there is nowhere to go."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Pagination

## A list in the browser

```tsx
import { useState } from 'react';
import { PAGE_SIZE, Pagination } from '@arbol-ai/ui';

const CONTACTS = Array.from({ length: 52 }, (_, index) => `Contact ${index + 1}`);

const ContactsExample = () => {
  const [page, setPage] = useState(1);
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <ul className="text-sm">
        {CONTACTS.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE).map((contact) => (
          <li key={contact}>{contact}</li>
        ))}
      </ul>
      <Pagination onPage={setPage} page={page} total={CONTACTS.length} />
    </div>
  );
};

<ContactsExample />
```

## A server list with cursors

While a page loads, the pressed button waits with a spinner and keeps focus.

```tsx
import { useState } from 'react';
import { CursorPagination } from '@arbol-ai/ui';

const ConversationsExample = () => {
  const [page, setPage] = useState(1);
  const [isFetching, setIsFetching] = useState(false);
  const go = (next: number) => {
    setIsFetching(true);
    setTimeout(() => {
      setPage(next);
      setIsFetching(false);
    }, 800);
  };
  return (
    <div className="max-w-sm">
      <CursorPagination
        hasNextPage={page < 4}
        hasPreviousPage={page > 1}
        isFetching={isFetching}
        onNext={() => {
          go(page + 1);
        }}
        onPrevious={() => {
          go(page - 1);
        }}
        page={page}
      />
    </div>
  );
};

<ConversationsExample />
```

## Source

The examples above are [`src/components/pagination/pagination.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/pagination/pagination.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/navigation/pagination/index.mdx