shadcn-admin: Shadcn과 Vite로 제작한 관리자 대시보드 UI

Shadcn과 Vite를 사용하여 만든 관리자 대시보드 UI입니다. 반응성과 접근성을 염두에 두고 구축되었습니다.

저는 직장과 개인 프로젝트에서 대시보드 UI를 만들어 왔습니다. 항상 미래 프로젝트를 위해 재사용 가능한 대시보드 UI 컬렉션을 만들고 싶었는데, 드디어 완성했습니다. 몇 가지 사용자 정의 컴포넌트를 만들었지만, 일부 코드는 ShadcnUI 예제에서 직접 각색되었습니다.

다만, 이것은 스타터 프로젝트(템플릿)는 아닙니다. 나중에 아마도 만들어야 할 것 같습니다.

• 라이트/다크 모드 지원
• 반응형 디자인
• 접근성 고려
• 내장 사이드바 컴포넌트 제공
• 전역 검색 명령어 기능
• 10개 이상의 페이지 구성
• 추가 사용자 정의 컴포넌트
• RTL(Right-to-Left) 지원

사용자 정의 컴포넌트 (클릭하여 확장)

이 프로젝트는 Shadcn UI 컴포넌트를 사용하지만, 더 나은 RTL(오른쪽에서 왼쪽으로 쓰기) 지원과 기타 개선을 위해 일부 수정되었습니다. 이 사용자 정의 컴포넌트들은 원본 Shadcn UI 버전과는 다릅니다.

만약 Shadcn CLI를 사용하여 컴포넌트를 업데이트하고 싶다면 (예: npx shadcn@latest add <component>), 일반적으로는 비사용자 정의 컴포넌트에 대해서는 안전합니다. 하지만 나열된 사용자 정의 컴포넌트의 경우, 프로젝트의 수정 사항을 유지하고 RTL 지원이나 기타 업데이트를 덮어쓰지 않으려면 변경 사항을 수동으로 병합해야 할 수도 있습니다.

만약 RTL 지원이 필요하지 않다면, 'RTL 업데이트된 컴포넌트'는 주로 RTL 호환성을 위한 것이므로 Shadcn CLI를 통해 안전하게 업데이트할 수 있습니다. '수정된 컴포넌트'에는 고려해야 할 다른 사용자 정의 사항이 있을 수 있습니다.

• scroll-area

• sonner

• separator

• alert-dialog

• calendar

• command

• dialog

• dropdown-menu

• select

• table

• sheet

• sidebar

• switch

참고:

수정된 컴포넌트 (Modified Components): 이러한 컴포넌트는 일반적인 업데이트를 포함하며, RTL 조정이 포함될 수 있습니다.
RTL 업데이트된 컴포넌트 (RTL Updated Components): 이러한 컴포넌트는 특정 언어 지원(예: 레이아웃, 위치 지정)을 위한 변경 사항을 가지고 있습니다. - 구현 세부 정보는 src/components/ui/의 소스 파일을 확인하세요.

• 프로젝트 내의 다른 모든 Shadcn UI 컴포넌트는 표준이며 CLI를 통해 안전하게 업데이트할 수 있습니다.

UI: ShadcnUI (TailwindCSS + RadixUI)

빌드 도구(Build Tool): Vite

라우팅(Routing): TanStack Router

타입 검사(Type Checking): TypeScript

린팅/포맷팅(Linting/Formatting): ESLint & Prettier

아이콘(Icons): Lucide Icons, Tabler Icons (브랜드 아이콘만)

인증(Auth) (부분적): Clerk

프로젝트를 복제하세요.

git clone https://github.com/satnaing/shadcn-admin.git

프로젝트 디렉토리로 이동하세요.

cd shadcn-admin

의존성을 설치하세요.

pnpm install

서버를 시작하세요.

pnpm run dev

이 프로젝트가 도움이 되거나 자신의 작업에 사용하게 된다면, 개발 및 유지 관리를 지원하기 위해 후원하는 것을 고려해 주세요. 커피 한 잔을 사주셔도 됩니다. 걱정하지 마세요, 모든 돈이 도움이 됩니다. 감사합니다! 🙏

질문이나 후원 문의는 [email protected]으로 자유롭게 연락 주십시오.

• Clerk - 모던 웹을 위한 인증 및 사용자 관리

🤍 @satnaing에 의해 제작됨

MIT 라이선스 하에 배포