React・Next.js・Tailwind CSS で実装したUIパターンの実装サンプルとライブラリ比較集
新着・更新情報
ライブラリ別 登場ページ数
- @nivo/core20 p
- @mantine/core17 p
- antd16 p
- recharts15 p
- chart.js15 p
- react-chartjs-215 p
- その他42 p
UIコンポーネント
🧩 レイアウト
5件ページ構造やコンテンツ配置に関するレイアウトUI
→ まずページの骨格から
🧭 ナビゲーション
6件タブバー・ボトムナビ・ハンバーガーメニューなど、コンテンツ切り替えに使うナビゲーションUI
→ 画面間の導線を設計する
📊 データの可視化
20件グラフやチャートなど、データを視覚的に表現するUI
→ メインコンテンツの見せ場を作る
⌨️ データの入力
5件チャットやフォームなど、データ入力に関するUI
→ ユーザーからの入力を受け取る
💬 シンプル表示
5件ツールチップやバッジなど、情報を補足・強調して表示するUIコンポーネント
→ 情報を補足・強調して伝える
🖱️ シンプル操作
3件ボタンやトグルなど、直感的に操作できるシンプルなUIコンポーネント
→ ボタン・トグルで細部を仕上げる
👆 タッチUI
4件スワイプやドラッグなど、タッチ操作・ジェスチャーに特化したUIコンポーネント
→ インタラクションで体験を磨く
🎬 アニメーション
6件フェード・スライド・スプリングなど、Framer Motionで実装するアニメーションパターン
→ 動きで体験を豊かにする