21st.dev の代わりに使える React コンポーネントカタログの選び方

21st.dev などのレジストリは、検索が一覧で、エージェントに渡しやすいです。一方で、GIF や短いプレビューではイージングが分からず、入れてから「思った動きと違う」と戻ることがあります。

代わりを探すときは、21st を捨てる必要はありません。ライブで動きを確定できる置き場を1つ足す、という選び方です。

この記事では、比較する3つの基準と、Cursor での使い分けを解説します。

1. ライブプレビューで、ホバーとスクロール入場が実物の React として動くか。

2. 出力が React（TypeScript）と Tailwind か。独自ランタイムは移植コストが上がります。

3. 配置先・依存・差し替えポイントが、エージェント向けに構造化されているか。

DesignLayer はこの3点向けに作られています。セクションは人間が組んだ完成品です。https://design-layer.com/components

小さいプリミティブや、コミュニティのバリエーションを広く見るなら既存レジストリです。LP のヒーローや署名のあるモーションを先に決めるなら、ライブカタログです。

shadcn/ui の隣に置く塊は、プリミティブの組み合わせでは半日かかることがあります。

Copy for Cursor は、統合指示 + TSX + デモノート + npm 依存です。無料は1日3回（日本時間）です。

MCP があれば、ブラウザを開かずに search_catalog と get_component が呼べます。

代わりは「全部を置き換える」より、「動きの確定」を別ツールに分けることです。DesignLayer は閲覧無料・カード不要です。今日の無料枠で1セクション試してください。