Pagination

A controlled pager that reuses the secondary small Button for Previous / Next and renders 32px page cells. When there are many pages it collapses to leading and trailing dots around a sibling window, as in the example below.

Installation

You can add this pagination component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add pagination

Table of Contents

Pagination is a controlled component - you own the current page state and it renders the page window, overflow dots and Previous / Next controls (which reuse the Buttoncomponent). We'll cover the following topics:

  • Basic pagination
  • Controlled page state
  • Overflow & the sibling window
  • Reusing the Button component