【Cursor】21st.dev の代わりを探す前に知りたい React カタログの比べ方

21st.dev でコンポーネントを探し、Cursor に入れてみたら、思っていた動きやページの雰囲気と合わなかった。

別の候補を試すうちに、気づけば半日たっていた。「21st.dev の代わり」で検索する人の多くは、こうした経験をしているはずです。

ただ、問題はレジストリそのものより、探しているものと置き場所の相性にあることが多いです。

この記事では、乗り換えるかを決める前に確認したい比較の軸を整理します。あわせて、Cursor での使い分けも紹介します。

こうしたコミュニティのレジストリ（多くの作者が部品を登録して共有する場所）は、検索すると多くの候補が一覧で並びます。CLI（コマンドで操作する道具）やエージェントで、手早くプロジェクトに入れることもできます。

小さな部品やバリエーションを広く見比べたいときには、とても速い道具です。

一方で、LP のヒーローのように「ページ全体の印象を決める塊」を探すときは、事情が変わります。時間が戻る典型は次のとおりです。

• 部品としては良いが、余白やタイポグラフィまで含めると自分のページに馴染まない

• 作者ごとに書き方や依存が違い、組み込むたびに調整が発生する

• 静止画や短いデモでは、イージングやスクロールとの連動が判断しきれない

• 部品のファイル（TSX）だけをエージェントに渡し、配置先と依存を推測させて差分が膨らむ

どれも、レジストリが悪いわけではありません。

「広く探す」道具で「1つに決める」作業をしようとすると、確認の回数が増えるということです。

いま使っているレジストリを捨てて、別のサービスに移る必要はたいていありません。おすすめは、目的によって置き場所を分けることです。

• 小さな基本部品（ボタンや入力など）を広く見る：既存のレジストリ

• ヒーローや料金表など、動きと余白まで完成した塊を決める：ライブで動きを確かめられるカタログ

• フォームやダイアログなど土台の UI：shadcn/ui

こう分けると、「探す」と「決める」が別の場所になります。その結果、組み込んでから戻る回数が減ります。

代わりを1つ探すより、足りない役割を1つ足すと考えるほうが現実的です。

足す先を選ぶときは、次の3つで比べると判断がぶれません。どのサービスを選ぶ場合でも、同じ基準が使えます。

DesignLayer は、この3つの軸に合わせて作ったカタログです。並んでいるのは、人が組んだ React + Tailwind のモーション付きセクションです。

ブラウザでライブプレビューしてから、コピーできます。閲覧にはアカウントもカードも要りません。

Cursor への渡し方は2通りあります。

• Copy for Cursor：統合の指示・ライブプレビューの URL・本体の TSX・npm 依存をまとめてコピーし Cursor や Claude のチャットに貼る。無料サンプル10個は無料アカウントで回数制限なし

• DesignLayer MCP：エディタの中で検索し（search_catalog）、そのまま取り込む（get_component）。ブラウザを開かずに済む。接続は30日ビルドパス、Lifetime、Plus。Free では接続できない

なお、DesignLayer のデザインの一部は 21st.dev にも掲載しています（作者ページ https://21st.dev/@DesignLayer ）。

向こうで1本触ってみて、続きをカタログで選ぶという使い方もできます。両方を行き来する前提で設計しているので、どちらか一方に決める必要はありません。

比較は公平にしておきます。次のような場合は、既存のレジストリだけで十分です。

• 必要なのが小さな部品やアイコン的な UI で、セクション単位の完成品は要らない

• 多くの作者のバリエーションを眺めて、アイデアを広げたい

• 動きの細部より、とにかく候補の数を見たい

反対に、次の場合はライブカタログを足す価値があります。

• LP のヒーローや CTA など、ページの印象を決める塊を早く決めたい

• 入れてから「動きが違った」と戻る回数を減らしたい

• エージェントに渡す指示を毎回書き直すのが手間になっている

shadcn/ui の隣に置くような動きのあるセクションは、基本部品を組み合わせて作ると半日かかることもあります。

そこだけを完成品で埋めるのが、もっとも時間の差が出る使い方です。

• レジストリで時間が戻るのは、「広く探す」道具で「1つに決める」作業をしているから

• 乗り換えより、目的ごとに置き場所を分けるほうが現実的

• 比べる軸は「ライブで動くか」「TSX + Tailwind か」「エージェント向けの情報があるか」の3つ

• DesignLayer は Copy for Cursor（無料サンプル10個は無料アカウントで回数制限なし）と MCP（30日ビルドパス、Lifetime、Plus）で Cursor に渡せる

まずは、いま作っている LP のヒーローを1つだけ、ライブプレビューで選んでみてください。https://design-layer.com/ja/components

Cursor に貼るまでの流れは https://design-layer.com/ja/articles/cursor-react-motion-components-guide で解説しています。

カタログ選びの観点をさらに詳しく知りたい場合は、https://design-layer.com/ja/articles/react-motion-ui-catalog-guide を参考にしてください。