Pagination

In the app

The table footer: a summary on the left, 26px page buttons on the right. Sits under a Table inside its Card.

@varick/ui/components/paginationAdded 2 Sept 2026

Usage

import { Pagination } from "@varick/ui/components/pagination";

export function Example() {
  return (
    <Pagination
      page={page}
      pages={5}
      onPageChange={setPage}
      summary={`${from} to ${to} of ${total}`}
    />
  );
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
page	number	required	Current page, 1-based.
pages	number	required	Total pages. Every page gets a button; use it under ten.
onPageChange	(page: number) => void	uncontrolled	Controlled paging. Without it the component tracks its own page.
summary	string	'Page n of m'	The left-hand caption.

Accessibility

<nav aria-label="Pagination">; the current page has aria-current="page"; the arrows carry labels and disable at the ends.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline-soft);
}
.page-btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-mid);
  border: 1px solid transparent;
}
.page-btn.active { color: var(--fg-high); border-color: var(--hairline); background: #FFFFFF; }
.page-btn:disabled { color: var(--fg-low); }