Gotowy Panel Administracyjny Zbudowany z Shadcn UI i Vite, Który Zaoszczędzi Ci Czasu przy Starcie

Za każdym razem, gdy rozpoczynasz nowy projekt hobbystyczny lub wewnętrzne narzędzie, musisz budować ten sam interfejs od zera. Sidebar, przełącznik trybu ciemnego, wyszukiwanie globalne, responsywny układ mobilny. Ta rutyna zajmuje dni. Autor repozytorium shadcn-admin często spotykał się z tym zadaniem w pracy i postanowił stworzyć uniwersalny szablon dla siebie. W rezultacie projekt zdobył ponad 13 tysięcy gwiazdek na GitHubie.

Co Jest pod Maską

Projekt jest zbudowany na nowoczesnym i szybkim stacku technologicznym. Vite służy jako narzędzie do budowania, a cały kod jest napisany w TypeScript. Stylowanie jest obsługiwane przez TailwindCSS w połączeniu z Radix UI. To klasyczny fundament Shadcn UI.

Ciekawym wyborem jest TanStack Router do routingu. W przeciwieństwie do standardowego React Router, zapewnia on ścisłe typowanie ścieżek i parametrów out of the box. Jeśli chodzi o ikony, autor wybrał Lucide i częściowo Tabler Icons. Do uwierzytelniania w projekcie zintegrowano usługę Clerk.

Co Czyni Ten Dashboard Interesującym

Repozytorium zawiera ponad tuzin wstępnie zbudowanych stron. Istnieją gotowe ekrany dla użytkowników, ustawień, błędów i analityki.

Kluczowe funkcje tej kompilacji:

• Pełna obsługa motywu ciemnego i jasnego.
• Paleta poleceń do wyszukiwania w całej aplikacji za pomocą skrótu klawiaturowego.
• Wstępnie zbudowany komponent sidebara, który prawidłowo się zwija na ekranach mobilnych.
• Obsługa trybu RTL dla języków pisanych od prawej do lewej.

Obsługa RTL jest dość rzadka w darmowych szablonach. Aby osiągnąć prawidłowe wyświetlanie elementów podczas przełączania kierunku tekstu, autor musiał ręcznie zmodyfikować niektóre bazowe komponenty Shadcn.

Ważna Uwaga przy Pracy z Komponentami

Jeśli planujesz użyć tego projektu jako bazy i aktualizować zestaw UI za pomocą narzędzia CLI npx shadcn@latest add, zachowaj ostrożność. Niektóre komponenty zostały tutaj zmodyfikowane.

Następujące pliki zostały zmodyfikowane:

• scroll-area
• sonner
• separator

Dodatkowo, następujące elementy zostały zaktualizowane dla obsługi RTL: dialog, select, table, sheet, sidebar, command i switch. Automatyczne aktualizacje przez Shadcn CLI po prostu nadpiszą te pliki domyślnymi wersjami. Niestandardowe modyfikacje autora i obsługa RTL zostaną utracone w tym procesie. Aby zachować zmiany, będziesz musiał ręcznie scalić pliki.

Jak Uruchomić Projekt Lokalnie

Będziesz potrzebować Node.js i menedżera pakietów pnpm, aby rozpocząć. Instalacja zajmuje zaledwie kilka minut.

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

Po tym lokalny serwer uruchomi aplikację, a będziesz mógł od razu doświadczyć szybkości Vite i płynnych przejść między stronami.

Dla Kogo Jest To Repozytorium

Autor szczerze stwierdza w opisie, że to repozytorium nie było przeznaczone jako oficjalny starter. Mimo to projekt doskonale nadaje się do tego celu.

To solidny wybór, jeśli potrzebujesz szybko wdrożyć panel administracyjny dla swojej usługi i chcesz uniknąć korzystania z ciężkich bibliotek takich jak Ant Design. Kod źródłowy służy również jako przydatne odniesienie do strukturyzacji komponentów TanStack Router i Shadcn UI w umiarkowanie złożonej aplikacji React.