Ein fertiges Admin-Dashboard mit Shadcn UI und Vite, das Ihnen beim Start Zeit spart

Jedes Mal, wenn Sie ein neues Hobbyprojekt oder ein internes Tool starten, müssen Sie dieselbe Oberfläche von Grund auf neu aufbauen. Sidebar, Dark-Mode-Umschalter, globale Suche, responsives mobiles Layout. Diese Routine nimmt Tage in Anspruch. Der Autor des Repositories shadcn-admin hat diese Aufgabe häufig bei der Arbeit erledigt und beschlossen, sich eine universelle Vorlage zusammenzustellen. Das Projekt hat mittlerweile über 13.000 Sterne auf GitHub gesammelt.

Was steckt unter der Haube

Das Projekt basiert auf einem modernen und schnellen Tech-Stack. Vite dient als Build-Tool, und die gesamte Codebasis ist in TypeScript geschrieben. Das Styling wird von TailwindCSS in Kombination mit Radix UI übernommen. Dies ist die klassische Grundlage für Shadcn UI.

Eine interessante Entscheidung wurde zugunsten von TanStack Router für das Routing getroffen. Im Gegensatz zum Standard-React Router bietet es von Haus aus strikte Typisierung von Pfaden und Parametern. Für Icons hat der Autor Lucide und teilweise Tabler Icons gewählt. Für die Authentifizierung ist der Clerk-Dienst in das Projekt integriert.

Was dieses Dashboard interessant macht

Das Repository enthält über ein Dutzend vorgefertigte Seiten. Es gibt fertige Bildschirme für Benutzer, Einstellungen, Fehler und Analysen.

Hauptmerkmale dieses Builds:

• Vollständige Dark- und Light-Theme-Unterstützung.
• Befehlspalette zum Durchsuchen der gesamten Anwendung über Tastenkombination.
• Vorgefertigte Sidebar-Komponente, die auf mobilen Bildschirmen korrekt eingeklappt wird.
• RTL-Modus-Unterstützung für Sprachen von rechts nach links.

RTL-Unterstützung ist bei kostenlosen Vorlagen ziemlich selten. Um die korrekte Elementanzeige beim Umschalten der Textrichtung zu erreichen, musste der Autor einige der Shadcn-Basiskomponenten manuell anpassen.

Wichtiger Hinweis bei der Arbeit mit Komponenten

Wenn Sie vorhaben, dieses Projekt als Basis zu verwenden und das UI-Kit über das CLI-Tool npx shadcn@latest add zu aktualisieren, seien Sie vorsichtig. Einige Komponenten wurden hier modifiziert.

Die folgenden Dateien wurden modifiziert:

• scroll-area
• sonner
• separator

Zusätzlich wurden die folgenden Elemente für RTL-Unterstützung aktualisiert: dialog, select, table, sheet, sidebar, command und switch. Automatische Updates über die Shadcn-CLI überschreiben diese Dateien einfach mit Standardversionen. Die benutzerdefinierten Modifikationen des Autors und die RTL-Unterstützung gehen dabei verloren. Um Änderungen beizubehalten, müssen Sie die Dateien manuell zusammenführen.

So führen Sie das Projekt lokal aus

Sie benötigen Node.js und den pnpm-Paketmanager für den Einstieg. Die Installation dauert nur wenige Minuten.

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

Danach startet der lokale Server die Anwendung, und Sie können sofort die Geschwindigkeit von Vite und die sanften Seitenübergänge erleben.

Für wen ist dieses Repository gedacht

Der Autor erklärt ehrlich in der Beschreibung, dass dieses Repository nicht als offizieller Starter gedacht war. Nichtsdestotrotz eignet sich das Projekt hervorragend für diesen Zweck.

Das ist eine solide Wahl, wenn Sie schnell ein Admin-Panel für Ihren eigenen Service bereitstellen müssen und schwere Bibliotheken wie Ant Design vermeiden möchten. Die Codebasis dient auch als nützliche Referenz für die Strukturierung von TanStack Router und Shadcn UI-Komponenten in einer React-Anwendung mit mittlerer Komplexität.