affectUI について
affectUIは、AI製品やSaaSアプリ向けのReactコンポーネント、イラスト、モーション効果を提供するライブラリです。スタイルを含む単一の.tsxファイルで配布され、ダークモード、アクセシビリティ、レスポンシブ対応を備えています。
主な機能
- 01スタイル込みの単一 .tsx ファイル
- 02コンポーネントのアニメーション
- 03組み込みのダークモード
- 04キーボード対応のアクセシブルな操作
- 05コンテナクエリによるレスポンシブレイアウト
活用シーン
- 01AI製品にインタラクティブな操作部品を追加
- 02オンボーディングや進捗画面の構築
- 03SaaSページ向けのアニメーションブロック作成
MCP 対応
MCPサーバーを通じて、Claude CodeやCursorなどのAIクライアントからコンポーネントの検索、ドキュメントの閲覧、プロジェクトへの追加ができます。
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
エンドポイント
https://www.affectui.com/api/mcpインストールコマンドをコピー
Claude CodeTerminal
claude mcp add --transport http flohoeller-affectui https://www.affectui.com/api/mcpCursor.cursor/mcp.json
{"mcpServers":{"flohoeller-affectui":{"type":"http","url":"https://www.affectui.com/api/mcp"}}}Cursor で開くVS Code.vscode/mcp.json
{"servers":{"flohoeller-affectui":{"type":"http","url":"https://www.affectui.com/api/mcp"}}}VS Code で開くClaude Desktopclaude_desktop_config.json
{"mcpServers":{"flohoeller-affectui":{"type":"http","url":"https://www.affectui.com/api/mcp"}}}Windsurf~/.codeium/windsurf/mcp_config.json
{"mcpServers":{"flohoeller-affectui":{"serverUrl":"https://www.affectui.com/api/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
すべてのエンドポイント
Streamable HTTP
https://www.affectui.com/api/mcp認証が必要ツール
4| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| query | string | はい | UI に求める機能や見た目 |
| section | enum | いいえ | 1 つのセクションに限定Components | Screens | Blocks | Illustrations | Motion |
| free_only | boolean | いいえ | 無料アイテムのみ |
詳細
ウェブサイト · コンポーネントを見る · ドキュメント · インストール · Pro
affectUI は、AI 製品や最新の SaaS アプリ向けに手作りされた React コンポーネント、イラスト、モーションエフェクトのライブラリです。すべてのアイテムはスタイルを内包した 1 つの .tsx ファイルです。Tailwind も CSS のセットアップもアニメーションライブラリも必要ありません。shadcn CLI でインストールするか、ファイルをコピーすれば、ソースコードはあなたのものです。
ショーケース
affectui.com のライブ映像から、お気に入りをいくつか紹介します。Pro のマークが付いたアイテムは affectUI Pro の一部で、このリポジトリには含まれていません。それ以外はすべて、ここから無料でインストールできます。
Agent Team プロンプトが自ら入力され、それぞれに役割を持つ 3 つのエージェントに分岐し、ツールのロゴが重なり合います |
Reaction Bar いいね、コメント、リポスト、シェアを 1 つのピルに – アイコンが弾けて塗りつぶされ、カウントが 1 桁ずつ増えていきます |
Team Invite つながったチームメイト – カーソルが新しいメンバーを空きスロットにドラッグすると、線が実線になりオンラインになります |
Command Menu Pro 1 つのフィールドからあらゆるものを検索して実行 – ロゴと ⌘1–⌘5 が付いたツールアクション、アイコン付きの日常的なコマンド |
Progress Tracker アニメーション付きのプログレスバー、自ら描画されるチェックマーク、自動再生を備えたオンボーディングチェックリスト |
KPI Chart Pro 複数行のチャートとポインターを追従するツールチップを備えたメトリクスカード |
Model Wheel 回転するドラム上の AI モデル名 – 行は端で湾曲して消え、各モデルは柔らかなグレーの塗りに着地します |
Logo Cluster 中央の白い円盤上のあなたのマーク – 企業ロゴがそこから飛び出し、その周りに収まります |
affectUI を選ぶ理由
- それぞれ 1 ファイル。 すべてのコンポーネントは、スタイルを内包した単一の
.tsxファイルです。設定するものは何もなく、CSS フレームワークも不要です。 - 完成度の高いモーション。 モーフィング、ずらしながらの表示、数字のロール、なめらかな状態変化を備え、そのすべてが
prefers-reduced-motionに配慮しています。 - ダークモードを標準搭載。 祖先要素に
darkクラスまたはdata-theme="dark"が付くと、各アイテムが切り替わります。 - デフォルトでアクセシブル。 本物のボタン、ラベル、キーボード操作に対応し、必要な箇所にはライブリージョンも備えています。
- レスポンシブ。 コンテナクエリを採用しているため、アイテムはウィンドウではなく、与えられたスペースに合わせて適応します。
インストール
要件
- React 19（TypeScript の有無を問いません）
- 任意の React 環境: Next.js、Vite、Remix、または素の React
- shadcn CLI を使う場合は
@/*インポートエイリアス（Next.js と shadcn ではデフォルトで設定されます）
shadcn CLI を使う場合
すべてのアイテムには専用のレジストリ URL があります。affectui.com の各アイテムのページ、または以下の表からコマンドを実行してください:
npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json
ファイルは components/ui に配置され、すぐにインポートできます。
短い名前のほうがよいですか？ components.json で名前空間を一度登録するだけです:
{
"registries": {
"@affectui": "https://www.affectui.com/r/{name}.json"
}
}
npx shadcn@latest add @affectui/reaction-bar
コピー＆ペースト
このリポジトリ内のアイテムのフォルダ（components/、illustrations/、motion/）を開き、ファイルをプロジェクトにコピーしてインポートしてください。必要な作業はこれだけです。
使い方
import { ReactionBar } from "@/components/ui/reaction-bar";
export function PostActions({ post }) {
return (
<ReactionBar
reactions={{ like: { count: post.likes, active: post.liked }, comment: { count: post.comments } }}
onReact={(key, state) => api.react(post.id, key, state.active)}
/>
);
}
すべてのアイテムの props、キーボード操作、アクセシビリティに関する注意事項は、各アイテムのページ（例: Reaction Bar）に記載されています。
AI ツールと組み合わせて使う
affectUI はエージェント対応です。MCP サーバーを一度接続すれば、Claude Code、Cursor、VS Code、Codex がすべてのアイテムを検索し、そのドキュメントを読み、あなたの代わりに追加できます:
claude mcp add --transport http affectui https://www.affectui.com/api/mcp
その他のクライアント: MCP 設定に { "mcpServers": { "affectui": { "url": "https://www.affectui.com/api/mcp" } } } を追加してください。セットアップなしの場合は、アシスタントに llms.txt または llms-full.txt を指定してください。affectui.com のすべてのページには、Claude、ChatGPT / Codex、Cursor、v0 向けの Copy prompt バーもあります。セットアップの詳細: AI と組み合わせて使う。
コンポーネント
| 名前 | 内容 | インストール |
|---|---|---|
| Button | プライマリー、セカンダリー、ゴースト、破壊的操作向けのボタン。アイコンやサイズを選べ、きらめく読み込み状態も備えています | npx shadcn@latest add https://www.affectui.com/r/button.json |
| Button (Clean) | プライマリー、セカンダリー、ゴースト、破壊的操作向けのボタン。アイコンやサイズを選べ、きらめく読み込み状態も備えています | npx shadcn@latest add https://www.affectui.com/r/button-clean.json |
| Change Summary | 前回からの変化を表示します。色付きの傾向を添えて、各行に指標を1つずつ表示します | npx shadcn@latest add https://www.affectui.com/r/change-summary.json |
| Change Summary (Clean) | 前回からの変化を表示します。色付きの傾向を添えて、各行に指標を1つずつ表示します | npx shadcn@latest add https://www.affectui.com/r/change-summary-clean.json |
| Comment Thread | 返信付きのコメントを表示します。アシスタントが実行した内容を報告し、詳細を開閉し、@メンションに回答します | npx shadcn@latest add https://www.affectui.com/r/comment-thread.json |
| Comment Thread (Clean) | 返信付きのコメントを表示します。アシスタントが実行した内容を報告し、詳細を開閉し、@メンションに回答します | npx shadcn@latest add https://www.affectui.com/r/comment-thread-clean.json |
| Decision Inbox | 2つの簡単な回答を用意した未決定事項を表示します。回答済みの項目は確認後、折りたたまれて表示されなくなります | npx shadcn@latest add https://www.affectui.com/r/decision-inbox.json |
| Decision Inbox (Clean) | 2つの簡単な回答を用意した未決定事項を表示します。回答済みの項目は確認後、折りたたまれて表示されなくなります | npx shadcn@latest add https://www.affectui.com/r/decision-inbox-clean.json |
| Email Draft | エージェントが作成した確認用メールです。宛先やトーンを切り替え、インライン編集し、添付ファイルを削除できます。送信や破棄もでき、元に戻せます | npx shadcn@latest add https://www.affectui.com/r/email-draft.json |
| Email Draft (Clean) | エージェントが作成した確認用メールです。宛先やトーンを切り替え、インライン編集し、添付ファイルを削除できます。送信や破棄もでき、元に戻せます | npx shadcn@latest add https://www.affectui.com/r/email-draft-clean.json |
| Filter Menu | グループ化されたフィルターを、削除可能なチップや折りたたみ可能なチェックボックスグループとともに表示します。「すべてクリア」とキーボードによる完全な操作にも対応しています | npx shadcn@latest add https://www.affectui.com/r/filter-menu.json |
| Filter Menu (Clean) | グループ化されたフィルターを、削除可能なチップや折りたたみ可能なチェックボックスグループとともに表示します。「すべてクリア」とキーボードによる完全な操作にも対応しています | npx shadcn@latest add https://www.affectui.com/r/filter-menu-clean.json |
| Message Actions | AIメッセージの下に表示される控えめなバーです。コピーするとチェックマークに変わり、再生成ではスピナーが回ってバージョン切り替えが開きます。親指アイコンを押すと理由を尋ね、読み上げは小さなイコライザーに変わります | npx shadcn@latest add https://www.affectui.com/r/message-actions.json |
| Message Actions (Clean) | AIメッセージの下に表示される控えめなバーです。コピーするとチェックマークに変わり、再生成ではスピナーが回ってバージョン切り替えが開きます。親指アイコンを押すと理由を尋ね、読み上げは小さなイコライザーに変わります | npx shadcn@latest add https://www.affectui.com/r/message-actions-clean.json |
| Notification Stack | 通知カードが重なって表示されます。手前のカードを閉じると、次のカードが表示されます | npx shadcn@latest add https://www.affectui.com/r/notification-stack.json |
| Notification Stack (Clean) | 通知カードが重なって表示されます。手前のカードを閉じると、次のカードが表示されます | npx shadcn@latest add https://www.affectui.com/r/notification-stack-clean.json |
| OTP Input | 使いやすさを追求した認証コード入力欄です。滑らかに動くフォーカスリング、貼り付けとSMSの自動入力、エラー時の穏やかな揺れを備え、認証完了時には「Verified」に変化します | npx shadcn@latest add https://www.affectui.com/r/otp-input.json |
| OTP Input (Clean) | 使いやすさを追求した認証コード入力欄です。滑らかに動くフォーカスリング、貼り付けとSMSの自動入力、エラー時の穏やかな揺れを備え、認証完了時には「Verified」に変化します | npx shadcn@latest add https://www.affectui.com/r/otp-input-clean.json |
| Profile Menu | サインイン中のユーザー、メニュー操作、プロフィール設定の進行状況を表示するアカウントカードです | npx shadcn@latest add https://www.affectui.com/r/profile-menu.json |
| Profile Menu (Clean) | サインイン中のユーザー、メニュー操作、プロフィール設定の進行状況を表示するアカウントカードです | npx shadcn@latest add https://www.affectui.com/r/profile-menu-clean.json |
| Progress Tracker | アニメーション付きの進行状況バー、描画されるチェックマーク、自動再生を備えたオンボーディングのチェックリストです | npx shadcn@latest add https://www.affectui.com/r/progress-tracker.json |
| Progress Tracker (Clean) | アニメーション付きの進行状況バー、描画されるチェックマーク、自動再生を備えたオンボーディングのチェックリストです | npx shadcn@latest add https://www.affectui.com/r/progress-tracker-clean.json |
| Reaction Bar | いいね、コメント、リポスト、シェアを1つのピル型ボタンにまとめています。アイコンは弾むように現れて塗りつぶされ、カウントは1桁ずつ増えていきます | npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json |
| Reaction Bar (Clean) | いいね、コメント、リポスト、シェアを1つのピル型ボタンにまとめています。アイコンは弾むように現れて塗りつぶされ、カウントは1桁ずつ増えていきます | npx shadcn@latest add https://www.affectui.com/r/reaction-bar-clean.json |
| Segmented Control | 2〜6個の選択肢を切り替えられます。盛り上がったピル型の表示や下線が滑らかに移動して少し伸び、ドラッグして移動することもできます。アイコン、カウント、バッジにも対応しています | npx shadcn@latest add https://www.affectui.com/r/segmented-control.json |
| Segmented Control (Clean) | 2〜6個の選択肢を切り替えられます。盛り上がったピル型の表示や下線が滑らかに移動して少し伸び、ドラッグして移動することもできます。アイコン、カウント、バッジにも対応しています | npx shadcn@latest add https://www.affectui.com/r/segmented-control-clean.json |
| Smart Recommendation | 信頼度を示すシグナルと切り替え可能な代替案を備えた提案カードです。提案を受け入れた後も元に戻せます | npx shadcn@latest add https://www.affectui.com/r/smart-recommendation.json |
| Smart Recommendation (Clean) | 信頼度を示すシグナルと切り替え可能な代替案を備えた提案カードです。提案を受け入れた後も元に戻せます | npx shadcn@latest add https://www.affectui.com/r/smart-recommendation-clean.json |
| Thinking Loader | AIの返信用の小さな作業中ピルです。8本の光線を持つスピナーと、段階ごとに切り替わって最後にチェックマークになる、きらめくラベルを備えています | npx shadcn@latest add https://www.affectui.com/r/thinking-loader.json |
| Thinking Loader (Clean) | AIの返信用の小さな作業中ピルです。8本の光線を持つスピナーと、段階ごとに切り替わって最後にチェックマークになる、きらめくラベルを備えています | npx shadcn@latest add https://www.affectui.com/r/thinking-loader-clean.json |
| Tips Panel | 短いヒントと各ヒントに1つのアクションを並べたグリッドです。実行したヒントは完了状態に変わります | npx shadcn@latest add https://www.affectui.com/r/tips-panel.json |
| Tips Panel (Clean) | 短いヒントと各ヒントに1つのアクションを並べたグリッドです。実行したヒントは完了状態に変わります | npx shadcn@latest add https://www.affectui.com/r/tips-panel-clean.json |
| Tool Call Card | エージェントのツール呼び出しを1行で表示します。リアルタイムのタイマー、ステータス、概要を備え、展開すると強調表示された引数と結果をコピーできます。エラー時には再試行でき、複数の呼び出しをまとめて表示するグループも備えています | npx shadcn@latest add https://www.affectui.com/r/tool-call-card.json |
| Tool Call Card (Clean) | エージェントのツール呼び出しを1行で表示します。リアルタイムのタイマー、ステータス、概要を備え、展開すると強調表示された引数と結果をコピーできます。エラー時には再試行でき、複数の呼び出しをまとめて表示するグループも備えています | npx shadcn@latest add https://www.affectui.com/r/tool-call-card-clean.json |
ブロック
| 名前 | 内容 | インストール |
|---|---|---|
| Logo Marquee | 終わりのない「Trusted by」ストリップ – シームレスにループし、ホバー時にイージングで停止、慣性でスクラブし、ホバーしたロゴがカラーに浮かび上がります | npx shadcn@latest add https://www.affectui.com/r/logo-marquee.json |
| Testimonial Wall | ランディングページの引用の壁 – 列が反対方向に無限にスクロールし、ホバー時にイージングで停止、慣性でスクラブします | npx shadcn@latest add https://www.affectui.com/r/testimonial-wall.json |
イラスト
| 名前 | 内容 | インストール |
|---|---|---|
| エージェントチーム | プロンプトが自動入力され、役割と重なり合うツールのロゴを持つ3つのエージェントに枝分かれします | npx shadcn@latest add https://www.affectui.com/r/agent-team.json |
| カバーフロー | カバーを3Dで閲覧できます。列をドラッグ、フリック、またはスクラブすると、最も近いカバーに戻ります。画像は柔らかな反射の上でフレーム内を漂います | npx shadcn@latest add https://www.affectui.com/r/cover-flow.json |
| DACH地域 | 隣接地域がフェードアウトするDACHマップと、国境沿いのパステルカラーの帯。米国、中国、インド、ブラジル、日本に切り替え可能です | npx shadcn@latest add https://www.affectui.com/r/region-dach.json |
| 空のカレンダー | 空と記されたカレンダーカードが重なり、ホバーすると扇状に広がります | npx shadcn@latest add https://www.affectui.com/r/empty-calendar.json |
| エンリッチメントオービット | 2つのリングの内側にあるGrokのタイルの周りを、彗星とデータノードが公転します | npx shadcn@latest add https://www.affectui.com/r/enrichment-orbit.json |
| フロストクラウド | 目の形にくり抜かれた、霜がかった白い雲が、赤橙色または青色の空に浮かびます。漂い、周囲を見回すように向きを変え、まばたきし、ポインターを追いかけます。クリックするとウインクしながら弾みます | npx shadcn@latest add https://www.affectui.com/r/frost-cloud.json |
| ゴーストチャット | 未返信のチャットメッセージに既読マークが付き、ホバーすると低評価の返信が表示されます | npx shadcn@latest add https://www.affectui.com/r/ghosted-chat.json |
| グロウクラウド | 青色または赤橙色の目がある光る雲が、漂い、周囲を見回すように向きを変え、まばたきし、ポインターを追いかけます。クリックするとウインクしながら弾みます | npx shadcn@latest add https://www.affectui.com/r/glow-cloud.json |
| インテグレーションビーム | 接続するツールの間にあなたの製品が配置されます。光のパルスが曲線状のビームを流れ、ホバーするとツールにフォーカスし、クリックすると動きを一時停止します | npx shadcn@latest add https://www.affectui.com/r/integration-beam.json |
| インテグレーショングリッド | 明るい中央タイルにあなたの製品マークを配し、その周囲に連携サービスのロゴが蜂の巣状に並びます。端に向かってフェードアウトします | npx shadcn@latest add https://www.affectui.com/r/integration-grid.json |
| レイヤースタック | 5層を重ねたアイソメトリック図と、その横に並ぶリスト。選択した項目のレイヤーが色付きで持ち上がります | npx shadcn@latest add https://www.affectui.com/r/layer-stack.json |
| リードソーシング | ChatGPTのタイルがGmailとGrokに接続され、接続線に沿って光が走ります | npx shadcn@latest add https://www.affectui.com/r/lead-sourcing.json |
| ロゴクラスター | 中央の白い円盤にあなたのマークがあり、企業ロゴがそこから飛び出して周囲に落ち着きます | npx shadcn@latest add https://www.affectui.com/r/logo-cluster.json |
| モデルホイール | 回転するドラムにAIモデル名が並びます。端では行が曲がり、それぞれのモデルが柔らかなグレーの背景に収まります | npx shadcn@latest add https://www.affectui.com/r/model-wheel.json |
| サイドフォルダー | 横向きに置かれた透明感のある青いフォルダー。ホバーするとポケットが開き、書類が右に滑り出します | npx shadcn@latest add https://www.affectui.com/r/side-folder.json |
| タブの過負荷 | ブラウザーウィンドウが重なり、ホバーしたタブに合わせてハイライトが移動します | npx shadcn@latest add https://www.affectui.com/r/tab-overload.json |
| チームへの招待 | チームメンバーがつながっています。カーソルで新しいメンバーを空きスロットにドラッグすると、線が実線に変わり、そのメンバーがオンラインになります | npx shadcn@latest add https://www.affectui.com/r/team-invite.json |
モーション
| 名前 | 内容 | インストール |
|---|---|---|
| グリッド背景 | コンテンツの背後でゆっくりと漂い、端に向かってフェードアウトする細い線のグリッドです | npx shadcn@latest add https://www.affectui.com/r/grid-background.json |
| ナンバーティッカー | オドメーター風の数字です。各桁が新しい値まで回転し、画面内にスクロールして表示されるとゼロからカウントします | npx shadcn@latest add https://www.affectui.com/r/number-ticker.json |
| シマー読み込み表示 | 1つの柔らかな光の筋が横切るスケルトンブロックと、「Thinking…」状態を表すきらめくテキストです | npx shadcn@latest add https://www.affectui.com/r/shimmer-loader.json |
| テキスト表示 | 単語または文字ごとに表示されるテキストです。画面内にスクロールして表示されると、それぞれが柔らかなぼかしから浮かび上がります | npx shadcn@latest add https://www.affectui.com/r/text-reveal.json |
affectUI Pro
コマンドメニュー、チャットコンポーザー、KPI チャート、料金プランブロック、アプリ画面一式を含む、さらに134個のコンポーネント、画面、ブロック、イラストは、affectUI Proに含まれています。買い切りで、アップデートは生涯無料です。これらのソースはこのリポジトリには含まれていません。
貢献
バグを見つけた場合や、コンポーネントが不足している場合は、issueを作成してください。ここにあるファイルはリリースごとに affectUI のソースと同期されるため、修正はプルリクエストではなく issue を通じて反映されます。CONTRIBUTING.mdをご覧ください。
ライセンス
このリポジトリ内のすべての内容は、MIT ライセンスの下で公開されています。個人プロジェクトや商用プロジェクトでご利用ください。 プレビューに表示されるロゴは各所有者に帰属し、サンプルコンテンツとしてのみ使用されています。
affectUI が時間の節約に役立ったら、⭐を付けてほかの人にも見つけてもらいましょう。
Flo が制作
コメント
Markdown 対応
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。