Eased について
Easedは、shadcn向けのモーション重視のReactコンポーネントライブラリです。shadcn CLIでUIを構築する開発者向けで、無料コンポーネントには操作部品、ナビゲーション、オーバーレイ、テーブル、チャット、AI関連の表示が含まれます。
主な機能
- 01モーション重視のReact・shadcnコンポーネント
- 02shadcn CLIによるコンポーネント導入
- 03操作部品、ナビゲーション、オーバーレイ
- 04テーブル、リスト、チャット、AI UI
活用シーン
- 01Reactプロジェクトにアニメーション付きフォーム部品を追加
- 02メニュー、ダイアログ、ナビゲーション画面の構築
- 03チャットやAIの状態表示の作成
- 04レジストリから個別コンポーネントを導入
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
エンドポイント
https://eased.dev/api/mcpインストールコマンドをコピー
Claude CodeTerminal
claude mcp add --transport http dev-eased-eased https://eased.dev/api/mcpCursor.cursor/mcp.json
{"mcpServers":{"dev-eased-eased":{"type":"http","url":"https://eased.dev/api/mcp"}}}Cursor で開くVS Code.vscode/mcp.json
{"servers":{"dev-eased-eased":{"type":"http","url":"https://eased.dev/api/mcp"}}}VS Code で開くClaude Desktopclaude_desktop_config.json
{"mcpServers":{"dev-eased-eased":{"type":"http","url":"https://eased.dev/api/mcp"}}}Windsurf~/.codeium/windsurf/mcp_config.json
{"mcpServers":{"dev-eased-eased":{"serverUrl":"https://eased.dev/api/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
詳細
Eased
Eased は、shadcn CLI でインストールできる、モーションを重視した React コンポーネントのライブラリです。
このリポジトリは Eased の無料の MIT ライセンス部分です。すべての無料コンポーネントのソース、ドキュメント、および eased.dev/r で配信されるレジストリ JSON が含まれています。
インストール
レジストリ名または URL を指定して、shadcn CLI でコンポーネントを追加します。
npx shadcn add @eased/button
npx shadcn add https://eased.dev/r/button.json
Eased は shadcn レジストリインデックスに登録されているため、components.json に registries エントリーがなくても、CLI は @eased を検出でき、@eased/<name> が機能します。
URL 形式では .json 拡張子が必要です。https://eased.dev/r/button.json は機能しますが、https://eased.dev/r/button は 404 を返します。
CLI はコンポーネントのソースを components/eased/<name>/ にコピーし、npm の依存関係をインストールして、Eased のスタイルシートをグローバル CSS に統合します。インポートする CSS ファイルはありません。以降はコードを自由に扱えます。
必要条件
- React 19
- Tailwind CSS v4
components.json。プロジェクトにない場合は、npx shadcn initを実行してください。
CLI が各コンポーネントの npm 依存関係をインストールします。無料コンポーネント全体で使用されている依存関係は、@base-ui/react（36）、@tanstack/react-table（2）、d3-scale（1）、d3-shape（1）、motion（55）、shiki（3）です。括弧内の数値は、それぞれの依存関係を使用するコンポーネント数です。
無料コンポーネント
アクション
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| ボタン | button | React と shadcn 向けのアニメーション付きボタンです。幅を維持するローディング状態を備えています。 | npx shadcn add @eased/button | ドキュメント | ソース |
| Undo Pill | undo-pill | React と shadcn 向けのアニメーション付き取り消しピルです。カウントダウンリングが完了したときだけ操作を確定します。 | npx shadcn add @eased/undo-pill | ドキュメント | ソース |
| Kbd | kbd | React と shadcn 向けのアニメーション付きキーキャップです。実際のキーを押したときと同じように沈み込みます。 | npx shadcn add @eased/kbd | ドキュメント | ソース |
入力
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| 入力 | input | React と shadcn 向けのアニメーション付きテキスト入力です。前後にアドオンを配置でき、エラー状態にも対応します。 | npx shadcn add @eased/input | ドキュメント | ソース |
| テキストエリア | textarea | React と shadcn 向けのアニメーション付きテキストエリアです。入力したテキストに応じて伸長し、文字数カウンターを備えています。 | npx shadcn add @eased/textarea | ドキュメント | ソース |
| フィールド | field | React と shadcn 向けのアニメーション付きフォームフィールドです。ラベルとコントロールに加え、ヘルプまたはエラーを表示する1行分の領域を備えています。 | npx shadcn add @eased/field | ドキュメント | ソース |
| スライダー | slider | React と shadcn 向けのアニメーション付きスライダーです。単一値と範囲に対応し、値をリアルタイムで表示します。 | npx shadcn add @eased/slider | ドキュメント | ソース |
| 数値フィールド | number-field | React と shadcn 向けのアニメーション付き数値フィールドです。押し続けると速度が上がるステッパーを備えています。 | npx shadcn add @eased/number-field | ドキュメント | ソース |
| OTP フィールド | otp-field | React と shadcn 向けのアニメーション付きワンタイムコードフィールドです。各セルへの自動入力と貼り付けに対応しています。 | npx shadcn add @eased/otp-field | ドキュメント | ソース |
| 日付ピッカー | date-picker | React と shadcn 向けのアニメーション付き日付ピッカーです。カレンダーのポップオーバー、日付の入力、期間指定に対応しています。 | npx shadcn add @eased/date-picker | ドキュメント | ソース |
| ファイルアップロード | file-upload | React と shadcn 向けのアニメーション付きファイルアップロードです。ドロップゾーン、ファイルごとの進捗表示、拒否されたファイルの理由のインライン表示を備えています。 | npx shadcn add @eased/file-upload | ドキュメント | ソース |
選択
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| セグメント | segmented | React と shadcn 向けのアニメーション付きセグメントコントロールです。複数の選択肢から 1 つを選べます。 | npx shadcn add @eased/segmented | ドキュメント | ソース |
| タブ | tabs | React と shadcn 向けのアニメーション付きタブです。下線またはピル型のインジケーターを備えています。 | npx shadcn add @eased/tabs | ドキュメント | ソース |
| トグルグループ | toggle-group | React と shadcn 向けのアニメーション付きトグルグループです。単一選択または複数選択ができます。 | npx shadcn add @eased/toggle-group | ドキュメント | ソース |
| ラジオグループ | radio-group | React と shadcn 向けのアニメーション付きラジオグループです。通常のラジオボタンまたは選択可能なカードを使用できます。 | npx shadcn add @eased/radio-group | ドキュメント | ソース |
| チェックボックス | checkbox | React と shadcn 向けのアニメーション付きチェックボックスです。親チェックボックス用の不確定状態に対応しています。 | npx shadcn add @eased/checkbox | ドキュメント | ソース |
| スイッチ | switch | React と shadcn 向けのアニメーション付きスイッチです。ラベルを指定すると、設定項目の行全体として表示されます。 | npx shadcn add @eased/switch | ドキュメント | ソース |
| セレクト | select | React と shadcn 向けのアニメーション付きセレクトです。トリガーの上に、選択肢が選ばれた状態で開きます。 | npx shadcn add @eased/select | ドキュメント | ソース |
| コンボボックス | combobox | React と shadcn 向けのアニメーション付きコンボボックスです。フィルタリング、クリアボタン、複数選択チップを備えています。 | npx shadcn add @eased/combobox | ドキュメント | ソース |
| 評価 | rating | React と shadcn 向けのアニメーション付き星評価です。ホバープレビュー、半段階の評価、読み取り専用モードに対応しています。 | npx shadcn add @eased/rating | ドキュメント | ソース |
ナビゲーション
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| パンくずリスト | breadcrumb | React と shadcn 向けのアニメーション付きパンくずリストです。スペースが足りなくなると、中間の項目をメニューにまとめます。 | npx shadcn add @eased/breadcrumb | ドキュメント | ソース |
| ページネーション | pagination | React と shadcn 向けのアニメーション付きページネーションです。ページを切り替えても幅は変わりません。 | npx shadcn add @eased/pagination | ドキュメント | ソース |
| カルーセル | carousel | React と shadcn 向けのアニメーション付きカルーセルです。スクロールスナップ、マウスドラッグ、矢印キーに対応しています。 | npx shadcn add @eased/carousel | ドキュメント | ソース |
オーバーレイ
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| ポップオーバー | popover | Base UI を基盤とした、トリガーから開く React と shadcn 向けのアニメーション付きポップオーバーです。 | npx shadcn add @eased/popover | ドキュメント | ソース |
| ツールチップ | tooltip | オプションのショートカットに対応し、タッチ操作では表示されない、React と shadcn 向けのアニメーション付きツールチップです。 | npx shadcn add @eased/tooltip | ドキュメント | ソース |
| ダイアログ | dialog | Base UI を基盤とした、アラートダイアログやネストされたダイアログに対応する、React と shadcn 向けのアニメーション付きダイアログです。 | npx shadcn add @eased/dialog | ドキュメント | ソース |
| コマンドパレット | command-palette | ⌘K で開き、Enter キーで最初の一致項目を実行する、React と shadcn 向けのアニメーション付きコマンドパレットです。 | npx shadcn add @eased/command-palette | ドキュメント | ソース |
| ドロップダウンメニュー | dropdown-menu | チェックボックスとラジオボタンの行、ショートカット、サブメニューに対応する、React と shadcn 向けのアニメーション付きドロップダウンメニューです。 | npx shadcn add @eased/dropdown-menu | ドキュメント | ソース |
| コンテキストメニュー | context-menu | 右クリックまたは長押しで開き、サブメニューに対応する、React と shadcn 向けのアニメーション付きコンテキストメニューです。 | npx shadcn add @eased/context-menu | ドキュメント | ソース |
| シート | sheet | 画面の端からスライドインし、小さい画面ではボトムシートになる、React と shadcn 向けのアニメーション付きシートです。 | npx shadcn add @eased/sheet | ドキュメント | ソース |
ステータス
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| バッジ | badge | ステータスや件数の表示に使う、オプションのライブドットに対応した、React と shadcn 向けのアニメーション付きバッジです。 | npx shadcn add @eased/badge | ドキュメント | ソース |
| プログレス | progress | 不確定状態から実際の値へ引き継ぐ、React と shadcn 向けのアニメーション付きプログレスバーです。 | npx shadcn add @eased/progress | ドキュメント | ソース |
| スピナー | spinner | 画面外では一時停止し、スクリーンリーダーに状態を通知する、React と shadcn 向けのアニメーション付きスピナーです。 | npx shadcn add @eased/spinner | ドキュメント | ソース |
| スケルトン | skeleton | ページ上のすべてのプレースホルダーで同じシマー効果を共有する、React と shadcn 向けのアニメーション付きスケルトンです。 | npx shadcn add @eased/skeleton | ドキュメント | ソース |
| アバター | avatar | ホバー時にグループが広がる、React と shadcn 向けのアニメーション付きアバターです。 | npx shadcn add @eased/avatar | ドキュメント | ソース |
| アラート | alert | コンテキスト、成功、警告、エラーメッセージに使う、React と shadcn 向けのアニメーション付きアラートです。 | npx shadcn add @eased/alert | ドキュメント | ソース |
| トースト | toast | 「元に戻す」などのアクションボタンに対応する、React と shadcn 向けのアニメーション付きトーストスタックです。 | npx shadcn add @eased/toast | ドキュメント | ソース |
テキストと数値
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| 数値ロール | number-roll | React と shadcn 向けのアニメーション付き数値カウンターで、ロケールに応じた書式設定に対応しています。 | npx shadcn add @eased/number-roll | ドキュメント | ソース |
| テキスト切り替え | text-swap | React と shadcn 向けのアニメーション付きテキスト切り替えで、隣接する要素をずらさずにラベルや値を変更できます。 | npx shadcn add @eased/text-swap | ドキュメント | ソース |
リストとテーブル
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| テーブル | table | React と shadcn 向けの極細線のテーブルで、TanStack Table を基盤とし、固定ヘッダーと高密度またはゆったりした行に対応しています。 | npx shadcn add @eased/table | ドキュメント | ソース |
| セルキット | cells | React と shadcn 向けのアニメーション付きテーブルセルのセットで、名前、ステータス、数値、進捗、時刻、ID に対応しています。 | npx shadcn add @eased/cells | ドキュメント | ソース |
| アコーディオン | accordion | Base UI Accordion を基盤とした、React と shadcn 向けのアニメーション付きアコーディオンです。 | npx shadcn add @eased/accordion | ドキュメント | ソース |
| スクロール領域 | scroll-area | React と shadcn 向けのアニメーション付きスクロール領域で、細いオーバーレイスクロールバーと端のフェードに対応しています。 | npx shadcn add @eased/scroll-area | ドキュメント | ソース |
| ツリー | tree | WAI-ARIA に準拠したキーボード操作に対応する、React と shadcn 向けのアニメーション付きファイルツリーです。 | npx shadcn add @eased/tree | ドキュメント | ソース |
チャット
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| コンポーザー | composer | React と shadcn 向けのアニメーション付きチャットコンポーザーで、ファイル添付に対応し、返信のストリーミング中には停止ボタンを表示します。 | npx shadcn add @eased/composer | ドキュメント | ソース |
| メッセージ | message | React と shadcn 向けのアニメーション付きチャットメッセージで、AI SDK の UIMessage のテキストとファイルパーツをレンダリングします。 | npx shadcn add @eased/message | ドキュメント | ソース |
| 添付チップ | attachment | React と shadcn 向けのアニメーション付き添付チップで、画像サムネイル、アップロードの進捗表示、再試行に対応しています。 | npx shadcn add @eased/attachment | ドキュメント | ソース |
AI
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| シマーテキスト | shimmer-text | React と shadcn 向けのアニメーション付きシマーテキストで、処理中のステータスラベルに使用できます。 | npx shadcn add @eased/shimmer-text | ドキュメント | ソース |
| 思考バー | thinking-bar | React と shadcn 向けのアニメーション付き思考バーで、推論モデルが思考している時間を表示します。 | npx shadcn add @eased/thinking-bar | ドキュメント | ソース |
| エージェントオーブ | agent-orb | React と shadcn 向けのアニメーション付きエージェントオーブで、アシスタントが待機中、リスニング中、思考中、発話中のいずれかを表示します。 | npx shadcn add @eased/agent-orb | ドキュメント | ソース |
チャート
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| スパークライン | sparkline | React と shadcn 向けのアニメーション付きスパークラインです。単語ほどの幅に収まる折れ線グラフで、任意でスクラブ時の数値を表示できます。 | npx shadcn add @eased/sparkline | ドキュメント | ソース |
コード
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| コードブロック | code-block | React と shadcn 向けのアニメーション付きコードブロックです。Shiki によるハイライト、コピーボタン、折りたたみ可能な長いブロックを備えています。 | npx shadcn add @eased/code-block | ドキュメント | ソース |
| コードタブ | code-tabs | React と shadcn 向けのアニメーション付きコードタブです。複数のファイル、またはパッケージマネージャーごとのコマンドを表示します。 | npx shadcn add @eased/code-tabs | ドキュメント | ソース |
| スニペット | snippet | React と shadcn 向けのアニメーション付きコマンドスニペットです。コピーボタン付きの1行コマンドです。 | npx shadcn add @eased/snippet | ドキュメント | ソース |
サーフェスとフォーカス
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| カード | card | React と shadcn 向けのカードです。shadcn のパーツを備え、カード全体をクリック可能にするリンクを任意で設定できます。 | npx shadcn add @eased/card | ドキュメント | ソース |
| 同心フレーム | concentric-frame | React と shadcn 向けのレイアウトフレームです。CSS 変数を使って、入れ子になった角丸の半径を同心円状に保ちます。 | npx shadcn add @eased/concentric-frame | ドキュメント | ソース |
| プログレッシブブラー | progressive-blur | React と shadcn 向けのプログレッシブブラーです。ヘッダー、下部バー、入力欄の下で、コンテンツを端に向かってフェードさせます。 | npx shadcn add @eased/progressive-blur | ドキュメント | ソース |
| 画像比較 | image-compare | React と shadcn 向けのアニメーション付き画像比較スライダーです。ドラッグまたはキーボードで動かせる仕切りを備えています。 | npx shadcn add @eased/image-compare | ドキュメント | ソース |
Mac
| コンポーネント | 名前 | 機能 | インストール | ドキュメント | ソース |
|---|---|---|---|---|---|
| Mac メニューポップオーバー | mac-menu-popover | React と shadcn 向けのアニメーション付き macOS メニューバーポップオーバーです。Tauri と Electron のアプリで使えます。 | npx shadcn add @eased/mac-menu-popover | ドキュメント | ソース |
| Mac HUD | mac-hud | React と shadcn 向けのアニメーション付き macOS 音量・明るさ HUD です。従来の四角形または macOS 26 のピル型で表示できます。 | npx shadcn add @eased/mac-hud | ドキュメント | ソース |
14 カテゴリーにわたる60個の無料コンポーネントがあります。それぞれに docs/components/ のページもあります。
AI エージェント向け
- llms.txt：ドキュメントとすべてのコンポーネントのインデックス
- llms-full.txt：ドキュメントとすべての無料コンポーネントのページを1つのファイルにまとめたもの
- Motion ドキュメント：各コンポーネントで使われているスプリング、カーブ、継続時間
- AI と MCP のドキュメント：MCP サーバー、スキル、クライアントごとの設定
MCP サーバー
Eased MCP サーバーの URL は https://eased.dev/api/mcp です。Claude Code の場合：
claude mcp add --transport http eased https://eased.dev/api/mcp
Cursor の場合、.cursor/mcp.json に記述します：
{
"mcpServers": {
"eased": {
"url": "https://eased.dev/api/mcp"
}
}
}
スキル
npx skills add easedui/skills
eased-motion をインストールします。モーションルールのみです。
npx shadcn add https://eased.dev/r/eased-skill.json
eased-skill をインストールします。Eased のデザインスキル一式が .claude/skills/eased/SKILL.md に書き込まれます。
アクセシビリティ
アニメーションを含むすべてのコンポーネントは、prefers-reduced-motion に対応しています。モーションのドキュメントより：
アニメーションを含むすべてのコンポーネントには、動きを抑える分岐があります。訪問者のシステムが動きを抑える設定を求めている場合、動きは 100ms の不透明度フェード（
reducedFade）になるか、なくなり、ループアニメーションは停止します。
ライセンス
無料のコンポーネントは MIT ライセンスです。LICENSE をご覧ください。Eased Pro は別途有料のプランです。eased.dev をご覧ください。Pro のソースコードはこのリポジトリには含まれていません。
このリポジトリの内容
| パス | 内容 |
|---|---|
src/registry/eased/<name>/ | コンポーネントのソースコードと README.md（使い方、プロパティ、モーション） |
src/registry/eased/_primitives/ | コンポーネントが使用する共通プリミティブ |
src/registry/eased/lib/ | 共通ヘルパー：スプリングと時間設定（motion.ts）、押下時のスタイル（press.ts）、DOM、プラットフォーム、フォーマットのヘルパー |
src/registry/eased/mac-*/ | Tauri および Electron アプリ向けの Mac コンポーネント。それぞれに Tauri ウィンドウ設定が含まれます |
docs/ | Markdown 形式のドキュメント：インストール、テーマ設定、モーション、AI と MCP、および各コンポーネントのページ |
public/r/ | ビルド済みのレジストリ JSON |
registry.json | レジストリのマニフェスト。Eased のスタイルシートは eased-tokens アイテムです |
context7.json | Context7 の設定 |
問題を報告する
GitHub の issueを作成するか、eased.dev/report をご利用ください。
コメント
Markdown 対応
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。