ページネーション（Pagination）

データ一覧やコンテンツのページ送りに使うページネーションUIを、Mantine・Ant Design・shadcn/ui・Chakra UI・MUI・CSS/Tailwind の6種で比較。 siblings・boundaries・ページサイズ変更・シンプルモード・先頭/末尾ボタンなど、実践的な使用例をインタラクティブに確認できます。

@mantine/corev9.1.1 antdv6.3.7 shadcn/uiv4.2.0 @chakra-ui/reactv3.34.0 @mui/materialv9.0.0

Mantine Pagination

Mantineが提供する高機能ページネーションコンポーネント。siblings / boundariesで省略表示を細かく制御でき、Compound Componentsパターンで完全にカスタマイズ可能。withEdgesで先頭/末尾ボタンを追加。

siblings / boundaries制御Compound ComponentswithEdgesカラー/サイズusePaginationフック

読み込み中...

tsx

'use client';
import { useState } from 'react';
import { MantineProvider, Pagination } from '@mantine/core';
import '@mantine/core/styles.css';

export function MantinePaginationDemo() {
  const [page, setPage] = useState(1);
  return (
    <MantineProvider>
      <Pagination total={10} value={page} onChange={setPage} />
    </MantineProvider>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Mantineを使ったページネーションUIを実装してください。
- 使用ライブラリ: @mantine/core の Pagination コンポーネント
- total prop で総ページ数を指定
- value / onChange で制御コンポーネントとして使用
- siblings prop で省略表示の隣接ページ数を制御（デフォルト1）
- boundaries prop で先頭/末尾に常に表示するページ数を制御
- withEdges prop で先頭/末尾ボタンを表示
- color / size / radius でスタイルをカスタマイズ
- ページ切り替え時にデータ一覧を更新するデモを実装

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

ライブラリ比較

項目	Mantine	Ant Design	shadcn/ui	Chakra UI	MUI	CSS / Tailwind
省略表示（…）	✅ siblings / boundaries で自動制御	✅ 自動制御	✅ PaginationEllipsis	✅ Items の render で分岐	✅ 自動制御	⚠️ ロジック自作
ページサイズ変更	❌ 非対応（自作が必要）	✅ showSizeChanger	⚠️ 手動で実装	✅ pageSize prop	❌ 非対応（自作が必要）	⚠️ 自作
クイックジャンプ	❌ 非対応	✅ showQuickJumper	⚠️ 手動で実装	⚠️ 非対応	❌ 非対応	⚠️ 自作
シンプルモード	✅ withPages={false}	✅ simple prop	⚠️ 手動で実装	⚠️ 手動で実装	❌ 非対応	⚠️ 自作
合計件数表示	⚠️ 自作	✅ showTotal prop	⚠️ 手動で実装	⚠️ 手動で実装	⚠️ 自作	⚠️ 自作
Compound Components	✅ Pagination.Root / Items / Next 等	❌ 非対応	✅ PaginationContent / Item / Link	✅ Root / Items / Trigger	❌ 非対応	✅ 自由に構成可能
テーマ連携	✅ MantineProvider	✅ ConfigProvider	✅ CSS変数で管理	✅ ChakraProvider	✅ ThemeProvider	✅ CSS変数で管理
アクセシビリティ	✅ WAI-ARIA準拠	✅ WAI-ARIA準拠	✅ WAI-ARIA準拠	✅ WAI-ARIA準拠	✅ WAI-ARIA準拠	⚠️ 実装者次第
TypeScript	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート
バンドルサイズ追加	⚠️ 中	⚠️ 中	✅ 使った分だけ	⚠️ 中（emotion含む）	⚠️ 中（Emotion込み）	✅ ゼロ追加

選択のポイント

Mantine — siblings / boundaries による省略表示の細かな制御と、Compound Components パターンで UI の配置を自由にカスタマイズできるのが最大の強み。usePagination フックを単体で使えるため、完全カスタムの UI とも組み合わせやすい。Mantine ベースのプロジェクトなら第一選択。
Ant Design — showSizeChanger・showQuickJumper・showTotal・simple など、実務で必要になる機能が props ひとつで有効化できる手軽さが魅力。データテーブルとの連携も容易で、管理画面やダッシュボードの大量データ表示に向いている。
MUI — 週670万DLと圧倒的なシェアを誇るMaterial Design準拠のライブラリ。エンタープライズ〜スタートアップまで幅広く採用され、ドキュメントや事例が豊富。shape・variant・size・color など豊富なpropsでスタイルを素早く整えられる。Emotion（CSS-in-JS）を使用するため、Tailwind CSS v4との併用時はスタイルをMUI側のpropsで制御することを推奨。
shadcn/ui — シンプルなページネーションに特化したコンポーネント。省略表示・前後ナビが標準装備で、Compound Componentsパターンで構成を柔軟にカスタマイズできる。ページサイズ変更や総件数表示は手動実装が必要。
Chakra UI — Items の render prop でページボタンを完全にカスタマイズできる設計が特徴。省略表示も render 内の分岐で柔軟に対応できる。クイックジャンプやページサイズ変更が必要な場合は Ant Design が適している。
CSS / Tailwind CSS — ゼロ依存でバンドルサイズを最小化しつつ、省略表示ロジックから UI まで完全にコントロール可能。ページ番号の生成ロジックは自作が必要だが、要件にぴったり合ったカスタム実装を作れる。ブログやポートフォリオサイトなどシンプルなページ送りに最適。

ページネーションは、大量のデータやコンテンツを複数ページに分割して表示するナビゲーションUI。ユーザーは前後のページへ移動したり、特定のページ番号を指定してジャンプしたりできる。

検索結果一覧・商品リスト・管理画面テーブルなど、一度に表示しきれないデータセットで使われる。APIのoffset/limitパラメータやカーソルベースのページングと組み合わせることが多い。

主なバリエーション