Repolode
投稿する
shadcn-ui

shadcn-ui/ui

Radix UIとTailwind CSSを基盤とする、コピーして使えるReactコンポーネント集。コードは自分で所有し、自由にカスタマイズできます。

GitHub で見る公式サイト
スター
126,054
フォーク
13,176
未解決の Issue
1,777
最終コミット
16 時間前

これは何？

shadcn/uiは、依存関係としてインストールするのではなく、ソースコードをコピーしてプロジェクトに追加する、アクセシブルなUIコンポーネント集です。コンポーネントはカスタマイズや拡張を前提に設計されており、独自のコンポーネントライブラリを構築する際の出発点としても使えます。

プロジェクトはTypeScriptで記述されており、トピックからはReactとTailwind CSSを中心とした構成がうかがえます。Next.js、Vite、Laravelに対応し、基盤となるプリミティブとしてRadix UI、React Aria、Base UIと統合できます。コードは自分のリポジトリ内にあるため、上流のリリースを待たずにスタイル、動作、構造を直接変更できます。

ui.shadcn.comのドキュメントでは、インストール方法とコンポーネントの使い方を確認できます。リポジトリはMITライセンスで公開されており、コントリビューションガイドに沿った貢献を受け付けています。

主な機能

  • 01コンポーネントはソースコードとしてプロジェクトにコピーするため、自分で所有し、編集できます。
  • 02Radix UI、React Aria、Base UIなどのアクセシブルなプリミティブを基盤としています。
  • 03Tailwind CSSでスタイリングされており、独自のデザインシステムに合わせてスタイルを変更できます。
  • 04Next.jsやViteなどのReactフレームワークで利用でき、Laravelにも対応しています。

ユースケース

  • 洗練されたアクセシブルなフォーム、ダイアログ、メニューのコンポーネントが必要なReactまたはNext.jsアプリの構築。
  • 共通の土台をもとに、社内または自社向けのコンポーネントライブラリを作成。
  • コンポーネントのコードを完全に制御しながら、インターフェースをすばやく試作。

トピック

#react#tailwindcss#components#ui#typescript#accessibility#radix-ui#ai#base-ui#gen-ui

よくある質問

ui とは？
Radix UIとTailwind CSSを基盤とする、コピーして使えるReactコンポーネント集。コードは自分で所有し、自由にカスタマイズできます。 shadcn/uiは、依存関係としてインストールするのではなく、ソースコードをコピーしてプロジェクトに追加する、アクセシブルなUIコンポーネント集です。コンポーネントはカスタマイズや拡張を前提に設計されており、独自のコンポーネントライブラリを構築する際の出発点としても使えます。
ui は無料で使えますか？ライセンスは？
ui は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
ui は今もメンテナンスされていますか？
活発にメンテナンス中。ui の最終コミットは 2026年10月20日 です。
ui は何に使えますか？
洗練されたアクセシブルなフォーム、ダイアログ、メニューのコンポーネントが必要なReactまたはNext.jsアプリの構築。 共通の土台をもとに、社内または自社向けのコンポーネントライブラリを作成。 コンポーネントのコードを完全に制御しながら、インターフェースをすばやく試作。
ui はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/shadcn-ui/ui

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト