shadcn/ui + tailwindcss + tanstack-router 통합 패키지
npm install @sonamu-kit/react-componentsshadcn/ui + tailwindcss + tanstack-router 통합 패키지
Figma Maker 기반 디자인 시스템 적용 🎨
- 폰트: Pretendard (프리텐다드)
- 컬러 시스템: RGBA 기반 CSS 변수
- 다크 모드: 자동 지원 (.dark 클래스)
- 차트: 10가지 프리셋 컬러 (chart-1 ~ chart-10)
- 사이드바: 전용 컬러 시스템
- 커스텀 스크롤바: 브라우저별 최적화
- Typography: --text-2xl, --text-xl, --text-lg, --text-base, --text-sm
- Colors: --primary, --secondary, --accent, --destructive, --muted
- Radius: --radius-button, --radius-card, --radius-nav, --radius-toggle
- Chart: --chart-1 ~ --chart-10
- Sidebar: --sidebar, --sidebar-primary, --sidebar-accent
```
src/
├── components/ # shadcn/ui 기반 컴포넌트들
├── hooks/ # useTypeForm, useListParams 등 통합 hooks
├── lib/ # 유틸리티 함수들
├── router/ # tanstack-router 설정
└── styles/ # tailwindcss 글로벌 스타일 (Figma Maker 기반)
`bash`
cd modules/react-components
pnpm install
web 프로젝트에서 로컬 패키지로 연결하여 사용
`typescript`
import { Button } from "@sonamu-kit/react-components/components";
import { useTypeForm } from "@sonamu-kit/react-components/hooks";
- pnpm dev: TypeScript watch 모드pnpm build
- : 빌드pnpm lint
- : 린팅
이 패키지는 추후 sonamu/ui`로 이전될 예정입니다.