ComponentsNavigationPagination

Pagination

Page navigation component with 17 variants covering every real-world use case.

17 variantsEllipsisJump to pageTableDotsLoading

Default

Live preview

Solid filled active page button with ellipsis for large page counts

App.tsx

tsx

1import { Pagination } from 'omverse-ui'
2 
3const [page, setPage] = useState(3);
4 
5<Pagination
6  page={page}
7  totalPages={10}
8  onPageChange={setPage}
9/>

All 17 variants

Live preview

Every variant shown with page 3 of 10 — click to navigate

default — Solid filled active page button

outlined — Border on every page button

pill — Rounded pill buttons

simple — Minimal prev / next with page indicator

compact — Tight layout for dense UIs

underline — Underline indicator on active page

floating — Elevated pill with drop shadow

dark — Dark background for dark-mode dashboards

glass-card — Frosted glass panel

vercel — Vercel-style minimal with arrow buttons

notion — Notion-style page selector

linear — Linear-style dense row

github — GitHub-style outlined group

stripe — Stripe dashboard pagination

dots — Dot indicators — carousel / gallery style

segmented — Segmented control style

App.tsx

tsx

1// 17 visual variants
2<Pagination page={page} totalPages={10} onPageChange={setPage} variant="default" />
3<Pagination page={page} totalPages={10} onPageChange={setPage} variant="outlined" />
4<Pagination page={page} totalPages={10} onPageChange={setPage} variant="pill" />
5<Pagination page={page} totalPages={10} onPageChange={setPage} variant="simple" />
6<Pagination page={page} totalPages={10} onPageChange={setPage} variant="compact" />
7<Pagination page={page} totalPages={10} onPageChange={setPage} variant="underline" />
8<Pagination page={page} totalPages={10} onPageChange={setPage} variant="floating" />
9<Pagination page={page} totalPages={10} onPageChange={setPage} variant="dark" />
10<Pagination page={page} totalPages={10} onPageChange={setPage} variant="glass-card" />
11<Pagination page={page} totalPages={10} onPageChange={setPage} variant="vercel" />
12<Pagination page={page} totalPages={10} onPageChange={setPage} variant="notion" />
13<Pagination page={page} totalPages={10} onPageChange={setPage} variant="linear" />
14<Pagination page={page} totalPages={10} onPageChange={setPage} variant="github" />
15<Pagination page={page} totalPages={10} onPageChange={setPage} variant="stripe" />
16<Pagination page={page} totalPages={10} onPageChange={setPage} variant="dots" />
17<Pagination page={page} totalPages={10} onPageChange={setPage} variant="segmented" />

Jump to page

Live preview

showJump adds a numeric input — type a page number and press Enter

App.tsx

tsx

1// showJump adds a "Go to page" input
2<Pagination
3  page={page}
4  totalPages={10}
5  onPageChange={setPage}
6  showJump
7/>

First and last buttons

Live preview

showFirstLast adds ⏮ and ⏭ jump-to-edge buttons

App.tsx

tsx

1// showFirstLast adds ⏮ and ⏭ buttons
2<Pagination
3  page={page}
4  totalPages={10}
5  onPageChange={setPage}
6  showFirstLast
7/>

Table variant

Live preview

Rows-per-page selector with item range label — built for data tables

App.tsx

tsx

1<Pagination
page={page}
totalPages={10}
onPageChange={setPage}
variant="table"
totalItems={243}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[10, 25, 50, 100]}
onRowsPerPageChange={setRowsPerPage}
10/>

Loading state

Live preview

loading prop shows a skeleton placeholder while data is fetching

App.tsx

tsx

1// loading shows a skeleton placeholder
2<Pagination
3  page={page}
4  totalPages={10}
5  onPageChange={setPage}
6  loading
7/>

Props

PropTypeDefaultDescription

pagenumber—Current page (1-indexed) — required

totalPagesnumber—Total number of pages — required

onPageChange(page: number) => void—Callback fired when the page changes — required

siblingsnumber1Number of sibling pages shown around the current page

showFirstLastbooleanfalseShow first and last page buttons

showPrevNextbooleantrueShow previous and next buttons

showJumpbooleanfalseShow a page jump input field

size'sm' | 'md' | 'lg''md'Button size

loadingbooleanfalseShows a skeleton loading state

rowsPerPagenumberundefinedCurrent rows per page (table variant)

rowsPerPageOptionsnumber[]undefinedOptions for rows-per-page selector (table variant)

totalItemsnumberundefinedTotal item count shown as range label (table variant)

onRowsPerPageChange(rows: number) => voidundefinedCallback when rows-per-page changes (table variant)