Next.js 16とshadcn/uiを使った管理ダッシュボードのテンプレート。複数のダッシュボードや認証画面、テーマプリセットを備えています。
satnaing/shadcn-admin
Shadcn UIコンポーネントとViteで構築した管理ダッシュボードUIテンプレート。ライト/ダークモード、RTL対応、グローバル検索コマンドを備えています。
- スター
- 16,580
- フォーク
- 2,495
- 未解決の Issue
- 24
- 最終コミット
- 2 か月前
これは何?
Shadcn Adminは、Shadcn UI、TailwindCSS、RadixUI、Viteを使った再利用可能な管理ダッシュボードUIです。10種類以上の既成ページと組み込みのサイドバーコンポーネントを備え、プロジェクトごとに一般的なダッシュボードのレイアウトを作り直す手間を省きます。
ライトモードとダークモード、レスポンシブレイアウト、グローバル検索コマンドに加え、標準のShadcnコンポーネントセットを拡張するカスタムコンポーネントも用意されています。複数のコンポーネントには右から左へ記述する言語(RTL)への対応を加える変更が施されています。Shadcn CLIで更新する際に手動でマージすべきコンポーネントが分かるよう、その内容もドキュメントに記載されています。
ルーティングにはTanStack Router、型チェックにはTypeScript、LintとフォーマットにはESLintとPrettierを使用しています。部分的な認証機能としてClerkを統合しています。ローカルではpnpmで実行でき、スターターテンプレートではありません。
主な機能
- 01ライトモードとダークモードに対応
- 02アクセシビリティを考慮したレスポンシブレイアウト
- 03組み込みのサイドバーコンポーネントとグローバル検索コマンド
- 0410種類以上の既成ページ
- 05一部のカスタマイズ済みコンポーネントでRTL言語に対応
ユースケース
- 社内管理パネルやバックオフィスツールのフロントエンド開発を始める
- Shadcnコンポーネントを使ったSaaSダッシュボードのプロトタイプを作成する
- RTL言語を使うユーザー向けの管理インターフェースを構築する
クイックスタート
- 1
プロジェクトをクローンする
git clone https://github.com/satnaing/shadcn-admin.git - 2
プロジェクトのディレクトリに移動する
cd shadcn-admin - 3
依存関係をインストールする
pnpm install - 4
開発サーバーを起動する
pnpm run dev
使う前に知っておきたいこと
- 認証機能は一部のみ実装されており、スポンサーであるClerkを使用しています。そのため、一部の機能にはClerkアカウントが必要な場合があります。
- これはスタータープロジェクトではなくUIテンプレートのため、そのまま使えるアプリの土台ではありません。
収録されている特集
トピック
よくある質問
- shadcn-admin とは?
- Shadcn UIコンポーネントとViteで構築した管理ダッシュボードUIテンプレート。ライト/ダークモード、RTL対応、グローバル検索コマンドを備えています。 Shadcn Adminは、Shadcn UI、TailwindCSS、RadixUI、Viteを使った再利用可能な管理ダッシュボードUIです。10種類以上の既成ページと組み込みのサイドバーコンポーネントを備え、プロジェクトごとに一般的なダッシュボードのレイアウトを作り直す手間を省きます。
- shadcn-admin は無料で使えますか?ライセンスは?
- shadcn-admin は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- shadcn-admin は今もメンテナンスされていますか?
- 半年以内に更新あり。shadcn-admin の最終コミットは 2026年9月10日 です。
- shadcn-admin は何に使えますか?
- 社内管理パネルやバックオフィスツールのフロントエンド開発を始める Shadcnコンポーネントを使ったSaaSダッシュボードのプロトタイプを作成する RTL言語を使うユーザー向けの管理インターフェースを構築する
- shadcn-admin のインストール方法は?
- プロジェクトをクローンする: git clone https://github.com/satnaing/shadcn-admin.git プロジェクトのディレクトリに移動する: cd shadcn-admin 依存関係をインストールする: pnpm install 開発サーバーを起動する: pnpm run dev
- shadcn-admin はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/satnaing/shadcn-admin
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
shadcn/ui、Tailwind、Supabaseを備え、CopilotとCursor向けのAIアシスタント指示ファイルも含むReact + Vite + TypeScriptのボイラープレート。
25以上のデータベースやあらゆるAPIに接続できる、管理画面・社内ツール・ダッシュボード構築向けのオープンソース低コードプラットフォーム。
React、Tailwind CSS、Base UIで構築したオープンソースのshadcn/uiコンポーネント、ブロック、ダッシュボードテンプレート。CLIまたはコピー&ペーストでプロジェクトに追加できます。
CoreUI UIライブラリをベースにした、レイアウト、コンポーネント、ページを備える無料のオープンソースBootstrap 5管理画面テンプレート。
Next.jsやshadcn/uiのアプリにコピーして使える、アニメーション付きUIコンポーネントとエフェクトを集めたReact・Tailwind CSSライブラリです。