Un tableau de bord admin prêt à l'emploi avec Shadcn UI et Vite qui vous fera gagner du temps au démarrage

Chaque fois que vous démarrez un nouveau projet personnel ou un utilitaire interne, vous devez reconstruire la même interface from scratch. Sidebar, toggle du mode sombre, recherche globale, layout responsive mobile. Cette routine prend des jours. L'auteur du dépôt shadcn-admin rencontrait fréquemment cette tâche au travail et a décidé de créer un modèle universel pour lui-même. En résultat, le projet a accumulé plus de 13 mille étoiles sur GitHub.

Ce qui se cache dessous

Le projet est construit sur une stack tech moderne et rapide. Vite sert d'outil de build, et l'ensemble du code est écrit en TypeScript. Le styling est géré par TailwindCSS en combinaison avec Radix UI. C'est la base classique pour Shadcn UI.

Un choix intéressant a été fait en faveur de TanStack Router pour le routing. Contrairement au React Router standard, il fournit un typage strict des paths et paramètres out of the box. Pour les icônes, l'auteur a choisi Lucide et partiellement Tabler Icons. Pour l'authentification, le service Clerk est intégré au projet.

Ce qui rend ce dashboard intéressant

Le dépôt inclut plus d'une douzaine de pages pré-construites. Il y a des écrans prêts à l'emploi pour les utilisateurs, les paramètres, les erreurs et l'analytique.

Fonctionnalités clés de cette build :

• Support complet des thèmes sombre et clair.
• Palette de commandes pour rechercher dans toute l'application via un raccourci clavier.
• Composant sidebar pré-construit qui se collapse correctement sur les écrans mobiles.
• Support du mode RTL pour les langues de droite à gauche.

Le support RTL est assez rare dans les templates gratuits. Pour obtenir un affichage correct des éléments lors du changement de direction du texte, l'auteur a dû modifier manuellement certains des composants de base Shadcn.

Point important lors du travail avec les composants

Si vous prévoyez d'utiliser ce projet comme base et de mettre à jour le kit UI via l'outil CLI npx shadcn@latest add, soyez prudent. Certains composants ici ont été modifiés.

Les fichiers suivants ont été modifiés :

• scroll-area
• sonner
• separator

De plus, les éléments suivants ont été mis à jour pour le support RTL : dialog, select, table, sheet, sidebar, command et switch. Les mises à jour automatiques via le Shadcn CLI écraseront simplement ces fichiers avec les versions par défaut. Les modifications personnalisées de l'auteur et le support RTL seront perdus dans le processus. Pour préserver les changements, vous devrez fusionner les fichiers manuellement.

Comment lancer le projet localement

Vous aurez besoin de Node.js et du gestionnaire de paquets pnpm pour commencer. L'installation ne prend que quelques minutes.

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

Après cela, le serveur local lancera l'application, et vous pourrez immédiatement expérimenter la vitesse de Vite et les transitions de page fluides.

À qui s'adresse ce dépôt

L'auteur déclare honnêtement dans la description que ce dépôt n'était pas destiné comme un starter officiel. Néanmoins, le projet est un excellent choix pour cet usage.

C'est un choix solide si vous avez besoin de déployer rapidement un panel admin pour votre propre service et voulez éviter de deal avec des bibliothèques lourdes comme Ant Design. Le code source sert également de référence utile pour structurer les composants TanStack Router et Shadcn UI dans une application React modérément complexe.