Pagination

Move through bounded pages with a compact view of the whole sequence.

Live — this one is real

Showing page 3 of 12.

Usage

import { useState } from "react";
import { Pagination } from "mizu-ui";

export function Example() {
  const [page, setPage] = useState(3);
  return (
    <div>
      <Pagination page={page} totalPages={12} onPageChange={setPage} />
      <p className="mizu-field-hint">Showing page {page} of 12.</p>
    </div>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect navigation/Navigation.tsx

Source is included in the npm package under src/navigation/Navigation.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
page / totalPages	number	—	One-based current page and total.
onPageChange	(page: number) => void	—	Load or show the requested page.

Accessibility

Labelled navigation; current page and disabled boundaries are explicit. No fetching is implied.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

Breadcrumbs Stepper AnchorNav SideNav