シンプル表示
ツールチップやバッジなど、情報を補足・強調して表示するシンプルなUIコンポーネントの比較
ツールチップ（Tooltip）
詳細を見る →ホバー・フォーカス時に補足情報を表示するツールチップUIの実装比較。表示位置・遅延・色・矢印・複数行など実践的なオプションをインタラクティブに確認
ここに説明が表示されます
ホバーしてね
左に表示
?
右に表示
MantineAnt DesignMUIshadcn/uiChakra UICSS カスタム
通知・トースト（Notification / Toast）
詳細を見る →操作結果・エラー・お知らせを伝えるオーバーレイUIの実装比較。表示位置・タイプ別スタイル・自動消去・プログレスバー・ローディング更新をインタラクティブに確認
✓
保存しました
変更が正常に保存されました
✕
エラーが発生しました
接続に失敗しました
i
新バージョンが利用可能です
MantineAnt DesignMUIshadcn/uiChakra UICSS カスタム
モーダル・ダイアログ（Modal / Dialog）
詳細を見る →確認・フォーム・アラートなど、ユーザーの注意を引きつけるオーバーレイUIの実装比較。サイズ・アニメーション・Escape キー・確認ダイアログをインタラクティブに確認
削除の確認✕
このアイテムを削除しますか？
この操作は元に戻せません。
キャンセル削除する
MantineAnt DesignMUIshadcn/uiChakra UICSS カスタム
バッジ・タグ（Badge / Tag）
詳細を見る →通知数・ステータス・ラベルを視覚的に表現するUIの実装比較。カウントバッジ・ステータスドット・Ribbon・閉じるタグ・選択可能タグをインタラクティブに確認
U
5
U
ReactNext.jsTypeScript ✕
新機能カード
NEW
MantineAnt DesignMUIshadcn/uiChakra UICSS カスタム
マーキー（Marquee）
詳細を見る →無限横スクロールを実現するマーキーUIの実装比較。Mantine・react-fast-marquee・CSSのみの3パターンをホバー停止・グラデーション・逆方向スクロールの観点でインタラクティブに確認
ReactTypeScriptNext.jsTailwind CSSMantineVercelReactTypeScriptNext.jsTailwind CSSMantineVercel
Framer MotionEChartsRechartsViteshadcn/uiFramer MotionEChartsRechartsViteshadcn/ui
Mantinereact-fast-marqueeCSS のみ
コードブロック（Code Block）
詳細を見る →シンタックスハイライト付きコードブロックの実装比較。Shiki・Prism.js・highlight.js・プレーンHTMLの4アプローチをSSR対応・バンドルサイズ・ハイライト品質の観点で比較
tsxコピー
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return (
<p>Count: {count}</p>
);
}
ShikiPrism.jshighlight.jsプレーン HTML
Zenn