21st.dev: React UIコンポーネントを素早く入手して共有するためのオープンソースプラットフォーム

21st.devはReact UIコンポーネントの作成、共有、インストールに特化したオープンソースプラットフォームです。shadcn/uiにインスパイアされ、Tailwind CSSとRadix UIをベースにした軽量でモダンなコンポーネントを提供します。開発者は、コンポーネントを素早くインストールしたり、作品を公開したり、AIを使って複数のUIバリエーションを生成したりできる。このプラットフォームはTypeScriptをサポートしておりnpx shadcnコンポーネントはコマンドで統合できる。コミュニティ主導のモデルは開発者の貢献を促し、フロントエンド開発者やデザインエンジニアが美しいインターフェイスを素早く構築するのに適している。

機能一覧

• Tailwind CSSとRadix UIをサポートした、shadcn/uiベースのReactコンポーネントを提供します。
• 利用するnpx shadcnコマンドを使えば、ワンクリックでコンポーネントとその依存関係をインストールできる。
• ユーザーが選択または調整できるように、5つのUIコンポーネントバリアントのAI生成をサポート。
• 開発者がカスタムコンポーネントを公開し、コミュニティで共有できるようにする。
• プレビューやビデオプレゼンテーションを含む、複数のコンポーネントのデモンストレーションを提供します。
• TypeScriptをサポートし、コンポーネントは軽量でカスタマイズ可能。
• AIやチャットでコンポーネントのスタイルを調整できるリミックス機能を統合。
• オープンソースコミュニティのサポートにより、ユーザーはGitHubを通じてコードを貢献することができる。

ヘルプの使用

インストールと使用

21st.devのコンポーネントのインストールはとても簡単で、主にnpx shadcnコマンドを実行する。以下はその詳細な手順である：

1. 開発環境の準備
   プロジェクトにNode.jsとnpmがインストールされていることを確認してください。Next.jsやViteのようなモダンなフロントエンドフレームワークを推奨します。プロジェクトはReactとTailwind CSSをサポートする必要があります。
2. インストール済みコンポーネント
   プロジェクトのルート・ディレクトリでターミナルを開き、以下のコマンドを実行して必要なコンポーネントをインストールする。例えば、accordionコンポーネントをインストールします：

   npx shadcn@latest add "https://21st.dev/r/shadcn/accordion"
   

このコマンドは自動的に実行される：

• コンポーネントコードとその依存関係をダウンロードする。
• 必要なファイル（JSXやCSSなど）を作成する。
• テーマスタイルを追加するためにTailwind設定ファイルを更新する。
• グローバルスタイルを設定する（必要な場合）。

手動でコードをコピーするのとは対照的にnpx shadcnコマンドは、依存関係が完全であることを保証し、設定エラーを回避します。インストールが完了すると、コンポーネントはプロジェクトで使用できるようになります。

3. コンポーネントの使用
   インストールが完了すると、コンポーネントはプロジェクトの指定したディレクトリ（通常はcomponentsフォルダ)。例えば、アコーディオン・コンポーネントを使用するコードは以下のようになる：

   import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
   export default function MyComponent() {
   return (
   <Accordion type="single" collapsible>
   <AccordionItem value="item-1">
   <AccordionTrigger>标题</AccordionTrigger>
   <AccordionContent>内容</AccordionContent>
   </AccordionItem>
   </Accordion>
   );
   }
   

   プロジェクトのニーズに合わせて、スタイルやロジックを調整することができます。

注目の機能操作

AIが生成するコンポーネントのバリエーション

21st.devの "Magic Agent "機能はAIによって5種類のUIコンポーネントを生成する。手順は以下の通り：

1. 21st.devにアクセスし、コンポーネントの要件（例えば "Login Form"）を入力してください。
2. Generate "ボタンをクリックすると、5つの異なるスタイルのコンポーネントのプレビューが表示されます。
3. バリアントを選択し、"Remix with AI "ボタンをクリックすると、レイアウト、色、間隔をさらに調整できます。
4. チャット・インターフェースを通じてAIと対話し、特定の要件（たとえば「ボタンの間隔を広げる」など）を入力すると、AIがリアルタイムでコードを修正する。
5. 満足のいくコンポーネントをダウンロードするか、コードをプロジェクトに直接コピーしてください。

カスタムコンポーネントの公開

開発者は以下の手順でコンポーネントを共有できる：

1. 21st.devにログインし、"Publish "ページに行く。
2. コンポーネントコードをアップロードし、説明、タグ、デモプレビューを記入します。
3. 投稿後、コンポーネントは "on_review "状態になり、直接リンクからのみ見えるようになります。
4. 承認後、コンポーネントは「投稿」ステータスに変更され、プロフィールとコミュニティページに表示されます。
5. その他のユーザーにはnpx shadcnコンポーネントを取り付ける。

地域貢献

21st.devは開発者にオープンソースへの貢献を奨励する：

1. GitHubリポジトリ(https://github.com/21st-dev)をご覧ください。
2. リポジトリをフォークし、ローカルにクローンする。
3. 新しいコンポーネントを開発したり、問題を修正したりするには、エディタ（Cursorなど）を使用します。
4. masterブランチにPull Requestを提出し、レビューを待つ。
5. Discord コミュニティに参加して、他の開発者とつながりましょう。

ほら

• TailwindのCSSが正しく設定されていることを確認してください。そうでない場合、コンポーネントのスタイルが機能しない可能性があります。
• AIが生成したコンポーネントは、プロジェクトに適合させるために手作業によるコード調整が必要になる場合があります。
• コンポーネントをリリースする際に、明確な文書とデモを提供することは、監査に合格するのに役立ちます。

アプリケーションシナリオ

1. フロントエンド・インターフェースを素早く構築
   フロントエンド開発者はウェブアプリケーションを開発するときに21st.devを通して既製のコンポーネント(ボタン、フォーム、ナビゲーションバーなど)を手に入れることで開発時間を節約できます。インストール後、プロジェクトの要件に合わせてスタイルを直接調整できます。
2. 設計エンジニアのためのコンポーネント共有
   デザイン・エンジニアは、他の開発者が使用できるように、優れたデザインのUIコンポーネントをプラットフォームに公開することができ、同時にコミュニティからのフィードバックを通じて作業を最適化することができる。
3. AIが支援するUIの反復
   プロダクト・マネージャーや初心者は、AIを使って複数のUIバリアントを生成し、深いコーディングなしにデザイン・アイデアを素早く検証することができる。
4. オープンソースプロジェクト開発
   オープンソースプロジェクトチームは21st.devのコンポーネントライブラリを利用してインターフェイスのスタイルを統一することができ、同時にプロジェクトの影響力を拡大するために独自のコンポーネントを提供することができます。

品質保証

1. 21st.devのコンポーネントは無料ですか？
   はい、21st.devはオープンソースプラットフォームであり、すべてのコンポーネントは無料で使用できますが、一部の高度な機能にはサブスクリプションが必要な場合があります（例：より高いAI生成クォータ）。
2. コンポーネントが私のプロジェクトと互換性があることを確認するには？
   コンポーネントは、React、Tailwind CSS、Radix UIに基づいて開発されます。プロジェクトがこれらの技術スタックをサポートし、互換性のためにTailwind CSSが適切に設定されていることを確認してください。
3. AIが生成した部品は市販されているのか？
   ただし、特定のコンポーネントのオープンソースプロトコル（MITなど）を確認してください。商用化の前に著作権の所有権を確認することをお勧めします。
4. 審査用コンポーネントの公表にはどれくらいの時間がかかりますか？
   コンポーネントの完成度とドキュメンテーションの質にもよるが、通常1～3日。