컴포넌트 라이브러리
이 스타터킷에 포함된 모든 컴포넌트를 한눈에 확인할 수 있습니다.
shadcn/ui 컴포넌트부터 커스텀 컴포넌트까지 총
41개의 재사용 가능한 컴포넌트를 제공합니다.
shadcn/ui 26개공통 커스텀 7개레이아웃 8개
shadcn/ui 컴포넌트
Radix UI를 기반으로 한 재사용 가능한 26개의 UI 컴포넌트입니다.
기본 입력
Button
components/ui/button
다양한 스타일의 버튼 컴포넌트
상호작용입력
Input
components/ui/input
텍스트 입력 필드
입력폼
Textarea
components/ui/textarea
여러 줄 텍스트 입력 필드
입력폼
Checkbox
components/ui/checkbox
체크박스 입력 컴포넌트
입력폼
RadioGroup
components/ui/radio-group
라디오 버튼 그룹
입력폼
Switch
components/ui/switch
토글 스위치 컴포넌트
입력폼
Select
components/ui/select
드롭다운 선택 컴포넌트
입력폼
Label
components/ui/label
폼 라벨 컴포넌트
입력폼
Form
components/ui/form
폼 바인딩 및 검증 (react-hook-form)
입력폼유효성
레이아웃
Card
components/ui/card
카드 레이아웃 컴포넌트 (CardHeader, CardTitle 등)
레이아웃구조
Separator
components/ui/separator
구분선 컴포넌트
레이아웃구조
ScrollArea
components/ui/scroll-area
스크롤 가능한 영역
레이아웃구조
Tabs
components/ui/tabs
탭 네비게이션 컴포넌트
레이아웃네비게이션
피드백 & 오버레이
Alert
components/ui/alert
경고 및 알림 메시지
피드백알림
Dialog
components/ui/dialog
모달 다이얼로그 컴포넌트
오버레이상호작용
Sheet
components/ui/sheet
슬라이드 아웃 시트 컴포넌트
오버레이모바일
Tooltip
components/ui/tooltip
마우스 호버 시 팁 표시
피드백정보
Popover
components/ui/popover
팝오버 컴포넌트
오버레이상호작용
Toast (Sonner)
components/ui/sonner
토스트 알림 (sonner 라이브러리)
피드백알림
데이터 표시
Badge
components/ui/badge
배지 라벨 컴포넌트
데이터라벨
Avatar
components/ui/avatar
사용자 아바타 이미지
데이터사용자
Progress
components/ui/progress
진행률 표시 바
데이터시각화
Skeleton
components/ui/skeleton
로딩 스켈레톤 UI
데이터로딩
Table
components/ui/table
테이블 컴포넌트
데이터표
네비게이션
Breadcrumb
components/ui/breadcrumb
경로 네비게이션
네비게이션경로
DropdownMenu
components/ui/dropdown-menu
드롭다운 메뉴
네비게이션메뉴
커스텀 컴포넌트
스타터킷에서 자체 제작한 재사용 가능한 컴포넌트들입니다.
입력 & 폼
FormField
components/shared/form/FormField
Label + Input + Error를 한 컴포넌트로
폼입력
SubmitButton
components/shared/form/SubmitButton
로딩 상태를 관리하는 제출 버튼
폼상호작용
데이터 표시
StatCard
components/shared/data-display/StatCard
통계 정보 카드 (값, 변화율, 아이콘)
데이터대시보드
EmptyState
components/shared/data-display/EmptyState
데이터 없음 상태 표시
데이터상태
LoadingSpinner
components/shared/data-display/LoadingSpinner
로딩 스피너 애니메이션
데이터로딩
상호작용 & 피드백
ConfirmDialog
components/shared/interaction/ConfirmDialog
확인 다이얼로그
상호작용다이얼로그
AlertBanner
components/shared/interaction/AlertBanner
상단 알림 배너
피드백알림
레이아웃 컴포넌트
페이지 구조를 만드는 주요 레이아웃 컴포넌트들입니다.
주요 레이아웃
Header
components/layout/header/Header
페이지 헤더 (로고, 네비게이션)
레이아웃네비게이션
Footer
components/layout/footer/Footer
페이지 푸터
레이아웃정보
Sidebar
components/layout/sidebar/Sidebar
사이드바 네비게이션
레이아웃네비게이션
SidebarNav
components/layout/sidebar/SidebarNav
사이드바 내 네비게이션 항목
레이아웃네비게이션
헤더 서브 컴포넌트
ThemeToggle
components/layout/header/ThemeToggle
라이트/다크 모드 토글 버튼
레이아웃테마
NavMenu
components/layout/header/NavMenu
데스크톱 네비게이션 메뉴
레이아웃네비게이션
MobileMenu
components/layout/header/MobileMenu
모바일 네비게이션 시트 메뉴
레이아웃네비게이션모바일
Logo
components/layout/header/Logo
사이트 로고 이미지/텍스트
레이아웃브랜딩