Shadcn UIとViteで構築された、すぐに使える管理ダッシュボード。スタートアップの時間を節約

新しいペットプロジェクトや社内ツールを始めるたびに、同じインターフェースを一から作り直す必要があります。サイドバー、ダークモード切り替え、グローバル検索、レスポンシブなモバイルレイアウトなど、こうしたルーティンには何日もかかります。リポジトリの作者はshadcn-admin工作中でこのタスクに頻繁に出会い универсальныйテンプレートを自作하기로決意しました。その 甲斐あって、このプロジェクトはGitHubで13,000スター以上を獲得しています。

内部の技術スタック

このプロジェクトはモダンで高速な技術スタックで構築されています。Viteがビルドツールとして機能し、コードベース全体がTypeScriptで書かれています。スタイリングはTailwindCSSとRadix UIの組み合わせで担当しています。これがShadcn UIの古典的な基盤です。

ルーティングにはTanStack Routerが採用されており、興味深い選択です。標準のReact Routerとは異なり、パスとパラメータの厳密な型付けが最初から提供されます。アイコンにはLucideと一部Tabler Iconsが選ばれています。認証にはClerkサービスが統合されています。

このダッシュボードの魅力

このリポジトリには12以上のプレビルドページが含まれています。ユーザー、設定、エラー、アナリティクスの готовые画面が用意されています。

このビルドの主な機能:

• 完全なダークモードとライトテーマのサポート。
• キーボードショートカットでアプリ全体を検索できるコマンドパレット。
• モバイル画面で適切に折りたたまれるプレビルドサイドバーコンポーネント。
• 右から左へ書く言語のためのRTLモードサポート。

RTLサポートは免费テンプレートではかなり珍しいです。テキスト方向を切り替えたときに適切な要素表示を実現するために、作者はベースとなるShadcnコンポーネントの一部を手動で修正する必要がありました。

コンポーネント使用時の重要な注意点

このプロジェクトをベースとして使用し、CLIツールnpx shadcn@latest addでUIキットを更新する予定がある場合は、注意が必要です。このプロジェクトの一部のコンポーネントは修正されています。

修正されたファイル:

• scroll-area
• sonner
• separator

さらに、以下の要素はRTLサポートのために更新されています: dialog、select、table、sheet、sidebar、command、switch。Shadcn CLIによる自動更新は、これらのファイルをデフォルトバージョンで上書きします。作者のカスタム修正とRTLサポートは、この過程で失われます。変更を保持するには、手動でファイルをマージする必要があります。

プロジェクトをローカルで実行する方法

始めるにはNode.jsとpnpmパッケージマネージャーが必要です。インストールには数分しかかかりません。

git clone https://github.com/satnaing/shadcn-admin.git
cd shadcn-admin
pnpm install
pnpm run dev

その後、ローカルサーバーがアプリケーションを起動し、Viteの速度とスムーズなページ遷移をすぐに体験できます。

このリポジトリが向いている人

作者は説明の中で、このリポジトリは公式のスターターを目的としていなかったことを正直に述べています。それでも、このプロジェクトはその目的に最適です。

自分のサービスの管理パネルを素早くデプロイする必要があり、Ant Designのような重量級ライブラリを避けたい場合、これは堅実な選択です。コードベースは、中程度の複雑なReactアプリケーションでTanStack RouterとShadcn UIコンポーネントを構造化するための参考例としても役立ちます。