Een kant-en-klaar admin dashboard gebouwd met Shadcn UI en Vite dat je tijd bespaart bij de start

Elke keer dat je een nieuw persoonlijk project of interne tool start, moet je dezelfde interface opnieuw bouwen. Sidebar, donkere modus toggle, globale zoekfunctie, responsive mobiele layout. Deze routine kost dagen. De repository auteur shadcn-admin kwam dit werk herhaaldelijk tegen en besloot een universeel template voor zichzelf samen te stellen. Het project heeft inmiddels meer dan 13 duizend sterren verzameld op GitHub.

Wat er onder de motorkap zit

Het project is gebouwd op een moderne en snelle tech stack. Vite dient als build tool, en de volledige codebase is geschreven in TypeScript. Styling wordt afgehandeld door TailwindCSS in combinatie met Radix UI. Dit is de klassieke basis voor Shadcn UI.

Een interessante keuze werd gemaakt voor TanStack Router voor routing. In tegenstelling tot de standaard React Router biedt het direct strikte typering van paden en parameters. Voor iconen koos de auteur Lucide en deels Tabler Icons. Voor authenticatie is de Clerk service geïntegreerd in het project.

Wat dit dashboard interessant maakt

De repository bevat meer dan een dozijn vooraf gebouwde pagina's. Er zijn kant-en-klare schermen voor gebruikers, instellingen, fouten en analyses.

Belangrijkste functies van deze build:

• Volledige ondersteuning voor donker en licht thema.
• Command palette voor zoeken in de hele applicatie via sneltoets.
• Vooraf gebouwde sidebar component die correct inklapt op mobiele schermen.
• RTL modus ondersteuning voor talen die van rechts naar links lezen.

RTL ondersteuning is vrij zeldzaam in gratis templates. Om correcte elementweergave te bereiken bij het schakelen van tekstrichting, moest de auteur handmatig enkele van de basis Shadcn componenten aanpassen.

Belangrijke overweging bij het werken met componenten

Als je van plan bent dit project als basis te gebruiken en de UI kit bij te werken via de CLI tool npx shadcn@latest add, wees dan voorzichtig. Sommige componenten zijn hier aangepast.

De volgende bestanden zijn aangepast:

• scroll-area
• sonner
• separator

Bovendien zijn de volgende elementen bijgewerkt voor RTL ondersteuning: dialog, select, table, sheet, sidebar, command en switch. Automatische updates via de Shadcn CLI zullen deze bestanden simpelweg overschrijven met standaard versies. De aangepaste wijzigingen van de auteur en RTL ondersteuning gaan hierbij verloren. Om wijzigingen te behouden, moet je de bestanden handmatig samenvoegen.

Hoe het project lokaal te draaien

Je hebt Node.js en de pnpm package manager nodig om te beginnen. Installatie kost slechts een paar minuten.

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

Daarna zal de lokale server de applicatie starten, en kun je direct de snelheid van Vite en de vloeiende pagina-overgangen ervaren.

Voor wie deze repository bedoeld is

De auteur stelt eerlijk in de beschrijving dat deze repository niet bedoeld was als officiële starter. Desondanks is het project uitstekend geschikt voor dat doel.

Dit is een solide keuze als je snel een admin panel voor je eigen dienst wilt implementeren en zware libraries zoals Ant Design wilt vermijden. De codebase dient ook als nuttige referentie voor het structureren van TanStack Router en Shadcn UI componenten in een gemiddeld complexe React applicatie.