navigation · Normal DOM only

Pagination

Prev + numbered pages + smart ellipsis + next. Keyboard-friendly, aria-current on the active page.

Use Pagination for list / table views where the dataset is paginated server-side. For client-only short lists prefer "load more" or VirtualList.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Pagination } from '@8maverik8/twenty-design';

Examples

Page 3 of 12 · 50 of 100 (sm)

tsx
<Pagination page={page} pageCount={12} onPageChange={setPage} />

Guidelines

✓
Reflect page in the URL.Shareable links stay deep-linkable; back/forward work.
✕
Hide Pagination when there is one page.Component returns null already when pageCount ≤ 1.