React モーション UI カタログの比較と選び方

公開日: 2026年9月12日 · 読了目安 8 分

動きのある React コンポーネントカタログを比較する観点。ライブプレビュー、ライセンス、スタック、エージェント連携、無料枠。

カタログが増えたいま、見る順

モーション UI の置き場は、レジストリ、有料キット、自社ストーリーブック、ライブカタログに分かれます。先に見るのは見た目の好みではなく、今の Next.js + Tailwind に載るかです。

この記事では、比較表に載せる6項目と、LP 用途での選び方を整理します。

1. プレビューが実物の React か。2. 出力が TSX + Tailwind か。3. 依存が明示されているか。4. ライセンスと商用利用。5. エージェント向けの包み。6. 無料で試せる範囲。

デザインシステムの全コンポーネントが要るならキットです。今週公開のヒーローが要るなら、完成セクションのライブカタログです。

DesignLayer は後者です。人間が組んだ塊、ライブプレビュー、Copy for Cursor。閲覧無料、コピーは1日3回。Pro で無制限と Templates。https://design-layer.com/components

カード無しでプレビューを共有できるか。MCP があるか。色の差し替えが指示1行で済むか。

比較は、機能数より「入れてからの手戻り」です。今日1セクション載せて、品質をリポジトリで見てください。