FORMA Docs

Pagination

Move through a long collection with clear bounds.

import { Pagination } from "@/forma/arc/pagination/pagination";
Base

In FORMA

  • Liegt in kit/arc/pagination und ist über @/forma/arc/pagination/pagination erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

  • Paged server results and long tables.
  • Lists where the page should live in the URL or state and fetch on change.

When not to use

  • Use carousel for browsing slides.
  • Use timeline with maxHeight for a scrolling feed instead of pages.

Usage

import { useState } from "react";
import { Pagination } from "@/forma/arc/pagination/pagination";

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

API reference

Pagination

Previous and next buttons around a sliding five page window with a traveling current page mark.

PropTypeDefaultDescription
page (required)number–Current page, 1-based. Clamped to the range.
pageCount (required)number–Total pages. Zero renders an empty nav.
onPageChange (required)(page: number) => void–Called with the requested page.
labelstring"Pagination"Accessible name for the nav landmark.

Keyboard interactions

KeysAction
TabMoves between the previous, page, and next buttons.
Enter / SpaceGoes to that page.

Accessibility

  • Renders a nav landmark with the label as its name.
  • Page buttons are labelled "Page 3" and the current one has aria-current="page".
  • Previous and next are disabled at the ends and carry aria-labels.

Motion

  • The current page mark springs to the selected button.
  • When the window shifts, numbers slide like a belt by the number of slots moved.
  • Reduced motion jumps the mark and swaps numbers without sliding.

Responsive behavior

  • It always shows a five page window plus arrows, so it stays the same width on any screen.
  • The row wraps if its container is narrower than the buttons, and the current mark re-measures on resize.

Performance

  • Only five page buttons render regardless of pageCount; one ResizeObserver repositions the current mark.

Notes for AI

  • Use for paged server results and long tables. Use carousel for browsing slides.
  • It is fully controlled: keep page in state or the URL and fetch on onPageChange.

Also in navigation

  • Tabs: Switch between related content in the same context.
  • Breadcrumb: Show where a page sits in a hierarchy.
  • Mega menu morph: A site header whose menus share one floating panel. Moving between sections morphs its size, slides the next menu in from that side and glides the caret under the new trigger, with hover intent, a safe triangle and an accordion sheet on narrow screens.

Guidance for AI tools

Pagination: Move through a long collection with clear bounds. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückTree viewWeiterFilter toolbar

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.