HTML/CSS만으로 종속성 없이 5페이지짜리 SaaS 관리자 대시보드 완성

Source: Dev.to

모든 SaaS 제품에는 대시보드가 필요합니다. 하지만 대부분의 대시보드 템플릿은 시작하기 위해 React, UI 라이브러리, 그리고 20개의 npm 패키지를 요구합니다.
그래서 저는 순수 HTML/CSS로 하나를 만들었습니다.

5개의 완전한 인터랙티브 페이지

• Dashboard

  • 추세 표시기가 포함된 4개의 메트릭 카드
  • 매출 바 차트
  • 트래픽 소스 도넛 차트
  • 최신 거래 테이블
  • 실시간 활동 피드

• Analytics

  • 전환 퍼널 시각화
  • 방문수 기준 상위 페이지
  • 주간 활성 사용자 차트

• Users

  • 전체 사용자 관리 테이블
  • 아바타 이니셜, 플랜 배지, 상태 표시기
  • 정렬 및 검색 가능

• Billing

  • 3단계 요금제 선택기
  • 결제 수단 관리
  • 청구서 내역

• Settings

  • 프로필 정보 폼
  • 알림 토글(인터랙티브)
  • 위험 구역

주요 특징

• 대부분의 대시보드 템플릿은 특정 프레임워크에 종속됩니다. 이 템플릿은 어떤 환경에서도 작동합니다 — 파일을 열고 바로 편집하면 됩니다.
• 빌드 단계 없음. npm 설치 필요 없음. React도 필요 없습니다.
• Pure HTML + CSS
• 사이드바 네비게이션을 위한 최소한의 바닐라 JS
• Google Fonts의 Inter 폰트 사용
• 외부 의존성 제로

구매 및 미리보기

• 구매: buildnova.gumroad.com
• 라이브 프리뷰: buildnova-hq.github.io/ui-kit

이 대시보드를 더 유용하게 만들려면 어떤 기능을 추가하고 싶으신가요?