300 以上のアニメーション付きでアクセシブルなコンポーネントとエフェクトを、React、Vue、Svelte、Angular、Astro、素の HTML で。ネイティブ Web Components で依存関係はゼロ。さらに
npx marvelous-ui-library@latest init
キーなしなら無料です。Pro を購入済みの場合は、求められたときにライセンスキーを貼り付けてください。
リリース当日に先行アクセス。スパムなし、ワンクリックで登録解除 · プライバシー。
1 回払いで、ずっと使えます · 14 日間の返金保証（条件）
1 つのライブラリで、この先乗り換えるすべてのスタックに。
プロジェクト内で実行してください。プロジェクト単位のインストールか、ユーザー単位の共有インストールを選びます。続いて Enter キーを押すと Free pack を、ライセンスキーを貼り付けると Pro をインストールします。
キーなしなら無料、ライセンスキーがあれば Pro。
npx marvelous-ui-library@latest init
あとから：npx marvelous-ui-library@latest add dialog tabs
新しいバージョンが出たら：npx marvelous-ui-library@latest update
Node.js がない場合は、ライセンスキーで Pro pack をダウンロードしてください。
$
Pro プラン
バージョン 2.4 をリリース
すべてのユーザーに同時に公開されます。
「Lumen redesign」を削除
48 個のファイルとその履歴もすべて削除されます。
<mv-hold-button>すべてのコンポーネントについて、ライブプレビュー、使用例のマークアップ、完全な API、アクセシビリティに関する注記を掲載しています。カテゴリー、キット、Exclusive、Free pack で絞り込めます。
組み込みの MCP サーバーにより、どの AI エージェントもカタログを検索し、各 API を読み、依存関係ごとコンポーネントをインストールできます。存在しない props をでっち上げることはありません。
ネイティブの Custom Elements とレイヤー化された CSS。スタックを乗り換えても、UI はそのまま使えます。
OKLCH のデザイントークン。スライダーをドラッグすると、このページ全体のテーマがリアルタイムで変わります。
ARIA ロール、完全なキーボード操作、見えるフォーカス、モーション軽減。後付けではありません。
各コンポーネントのページにはアクセシビリティの注記があります：キーボード、スクリーンリーダー、モーション軽減のユーザーに対して何をするかを説明しています。
読みやすいファイルがリポジトリに入ります。ブラックボックスもロックインもありません。
手作りの実装が見落としがちな細部のための 20 個の新しいコンポーネント：動き続けるオートフィル、常に最新の「3 分前」、初回レンダリングでは跳ねないカウント。
<mv-password-field>
<mv-relative-time>
<mv-count-bump>
表示と非表示の切り替え、Caps Lock の警告、最初の入力前に示されるルール。
スプレッドシートから貼り付けられるチップ。本物のフォームフィールドとして送信されます。
拒否は承諾と同じくらい簡単で、スクリプトは本当に同意を待ちます。
下にスクロールすると隠れますが、フォーカスやメニューが内側にある間は隠れません。
コピーするのはコマンドだけで、プロンプト、出力、行番号はコピーしません。
ずれもマイナスの数値もなく、目標時刻は訪問者自身の時間帯で表示されます。
常に最新の「3 分前」を、共有された 1 つのタイマーで。
「▲ +12.4%（先週比）」を、わかりやすい 1 つの文として読み上げます。
一度閉じれば記憶され、レイアウトがずれることもありません。
保存中、保存済み、オフライン：ちらつかず、早すぎる「Saved」も表示しません。
テキストが実際に切れているときだけ現れる「Show more」トグル。
メッシュ、グロー、グリッド、グレインの背景を 1 つのクラスで。JavaScript はゼロです。
ある領域の処理中に、システムカーソルの横に表示される小さな進行リング。
ホバーしたリンクに寄り添う柔らかなプレート。システムカーソルはそのままです。
ポインターやキーボードに追従する 1 行分の読書ガイド。
上に戻ろうとしたときだけ現れ、フォーカスをページ先頭に移動します。
幅の広いテーブルやカードのレール向けの、ドラッグ、ホイール、端のヒント。
ずれず、点滅せず、壊れた画像アイコンも表示しない画像プレースホルダー。
変化したときに跳ね、初回レンダリングでは跳ねないカートとバッジのカウント。
ネイティブの共有シート、またはサードパーティへのリクエストがゼロのメニュー。
155 の Exclusives：ほかのどのライブラリにもないオリジナルのコンポーネントです。特に役立つものは、解決する課題ごとに 8 つのキットにまとめられています。その多くは映画、ゲーム、テレビシリーズ、小説の仕組みを取り入れ、役に立つインターフェースの挙動に変えています。借りているのは仕組みだけで、アートワーク、ロゴ、タイポグラフィ、色は一切使っていません。
クラッシュ、入力ミス、大量のエラーにも耐える長いフォーム。
削除、権限の取り消し、シークレットの実際のリスクに見合った摩擦。
実際に何が起きているかを伝える待機、拒否、ロック。
出典、解釈、作成者を、主張ごとに見える形に。
なりすましはクリック前に検出し、埋め込みは招き入れるまで沈黙させます。
信頼を積み重ねて減衰するアラート、そして不在を知らせる警報。
計算方法、鮮度、スケールを示す数値。
情報量の多いアプリのための、キーボードでのターゲット指定、帰り道の糸、探索。
Exclusives はすべての有料プランに含まれます。作品名は各仕組みの由来を説明するためにのみ引用しており、それぞれの権利者に帰属します。権利者との提携や権利者による推奨はありません。
AI エージェントは UI を書くのは得意ですが、ライブラリの API を覚えるのは苦手です。Marvelous の MCP サーバーは、カタログ、各コンポーネントの API とデモのマークアップ、依存関係ごとファイルをインストールするツールを AI エージェントに提供します。その結果、プロジェクトがどのフレームワークを使っていても、最初から正しいコードが得られます。Claude Code、Cursor、Copilot、Windsurf に対応しています。
search_components 名前、タグ、API を横断する全文検索get_component API、アクセシビリティの注記、正規のデモマークアップinstall_components ファイルと依存関係をコピーし、お使いのフレームワーク用のスニペットを返しますget_design_tokens カスタム CSS をテーマに合わせるためにインストールコマンドには MCP サーバーとエージェント向けの指示が含まれます。
プロジェクトセットアップでは、このリポジトリで対応する AI エージェントを設定します。ユーザーセットアップでは Codex、Claude Code、Cursor、OpenCode を検出し、そのいずれかをすべてのプロジェクトで接続できます。検出されたすべてのエージェントを選ぶか、いくつかを選択するか、エージェントなしで CLI を使うことができます。uninstall を実行すると、エージェントの接続とライブラリが削除されます。
| 機能 | 一般的な React UI キット | Marvelous UI |
|---|---|---|
| Vue、Svelte、Angular、Astro、HTML で動作 | いいえ | はい |
| ランタイム依存関係 | framer-motion、three、gsap… | なし |
| AI エージェント向け MCP サーバー | まれ | 付属 |
| ほかでは見つからないオリジナルのコンポーネント | まれ | 155 の Exclusives |
| すべてでダークモードとモーション軽減に対応 | まちまち | 全コンポーネント |
| お使いの CSS が常に優先されます | いいえ | はい |
| 料金 | 多くは年額サブスクリプション | 買い切り、永久に使用可能 |
すべてのプランに、全コンポーネント、MCP サーバー、CLI、Playground のエクスポートが含まれます。Lifetime では、今後のすべてのコンポーネントとアップデートが更新不要で加わります。
価格は USD 表示です。EU と英国：VAT 込み。米国、カナダ、インド：決済時に売上税が加算されます。販売は販売代理店（merchant of record）である Polar が行います。14 日間の返金（条件）。
日常的に使う基本コンポーネントを、有料プランと同じ CLI と MCP サーバーとともに提供します。アカウントもライセンスキーも不要です。MIT ライセンス：ソースを読んで、そのまま公開できます。
ZIP · 直接ダウンロード · MCP サーバー、CLI、ドキュメントを同梱
ダウンロードを開始しました。ローンチ価格も知りたいですか？
任意です。Free pack には不要です。ローンチ当日に、ローンチ価格をお知らせするメールを 1 通だけお送りします。スパムなし、ワンクリックで登録解除 · プライバシー。
インストールコマンドでライセンスキーを省略すると、Free pack がセットアップされます。手動で使う場合は、上の ZIP の直接ダウンロードも引き続き利用できます。
どのプランでもライブラリ全体が使えます。
コンバージョンを重視した、アニメーション付きでアクセシブルなランディングページを、ご利用の技術スタックで、ソースコード付きで納品します。$2,850 から。毎月 3 枠限定です。
Marvelous UI の作者、Quentin Fankrache が開発しています。
はい。コンポーネントは標準の Custom Elements で、Light DOM のマークアップとカスケードレイヤー内の CSS で構成されています。React 19 以降はネイティブに対応しています。Vue は 1 行（isCustomElement）、Angular は CUSTOM_ELEMENTS_SCHEMA が必要です。Svelte、Astro、プレーンな HTML はそのまま動作します。MCP/CLI がお使いのフレームワーク用の正確なスニペットを返します。
Exclusives は、ほかのどのライブラリにもない 155 のオリジナルコンポーネントで、すべての有料プランに含まれます。キットは、ユーザーが離脱しないフォームや安全な破壊的操作など、解決する課題ごとに特に役立つものをまとめています。8 つのキットを見る
Lifetime は 1 回払いです。Marvelous UI が公開されている限り、新しいコンポーネント、アップデート、Playground のエクスポートをすべて、更新なしで利用できます。10月15日からは年単位または月単位のサブスクリプションも選べ、契約期間中は同じ内容を利用できます。解約しても、ダウンロードしたすべてのバージョンを、すべてのプロジェクトで永久に使い続けられます。プロジェクトを更新したいときに npx marvelous-ui-library@latest update を実行してください。ローカルでの変更は上書きされません。
CLI は検証済みの Pro アーカイブをローカルに保存します。npx marvelous-ui-library@latest restore を実行すると、サブスクリプション終了後でも、取得したバージョンを再インストールできます。
10月14日まで、Lifetime はローンチ価格で販売しています：Solo は $399 のところ $120 です。ローンチ後と同じ Lifetime ライセンスで、今後のすべてのアップデートが含まれ、更新も不要です。違うのは価格だけです。サブスクリプションは 10月15日に開始します。
はい。商用を含め、最終製品の数に制限はありません。できないのは、コンポーネント自体を UI キット、テンプレートマーケットプレイスの商品、競合ライブラリとして再販または再配布することです。
そのサイトやアプリで使われているコンポーネントは、ソースを含めて製品とともに納品されます。クライアントは、その製品の運用と保守のためにのみ使用でき、別の製品では使用できません。Unlimited では、そのソースを引き渡し、クライアントやその他の委託先が製品を保守できるようにすることもできます。御社のプロジェクトに携わるフリーランスは、御社の開発者の 1 人として数えられます。ライセンスを読む
はい。コンポーネントはプレーンな HTML タグ、CSS ファイル、JavaScript モジュールなので、サーバーでレンダリングするどのテンプレートでも動作します：CSS とスクリプトを一度読み込み、あとはタグを書くだけです。ファイルは CLI（Node.js が必要）でコピーするか、ZIP から取り出してください：Free pack、またはダウンロードページから入手できる Pro pack です。
問題なく使えます。すべてのセレクターは @layer mv.* の中で :where() に包まれているため、ユーティリティクラスが常に優先されます。レイヤーの順序を一度宣言するだけで完了です。
すべてのモジュールは SSR セーフです（トップレベルで window/document にアクセスしません）。コンポーネントはクライアント側でアップグレードされます。
インタラクティブなコンポーネントすべてに、ARIA ロール、完全なキーボード操作、見えるフォーカスを備えています。装飾的なエフェクトは支援技術から隠され、ユーザーがモーション軽減を設定している場合は停止します。
14 日以内にメールでご連絡ください。Pro pack をまだダウンロードしていない場合（CLI またはダウンロードページから）、理由を問わず全額返金します。ダウンロード済みの場合は、うまくいかなかった点をお知らせください。1 回に限り返金します。まずは Free pack と Playground を無料でお試しいただけます。利用規約
はい。決済は販売代理店（merchant of record）が処理し、御社の情報を記載した VAT 準拠の請求書を発行します。
このページは AI で翻訳されています。翻訳の問題を報告