Shadcn UI 컴포넌트와 Vite로 만든 관리자 대시보드 UI 템플릿으로, 라이트/다크 모드, RTL 지원, 전역 검색 명령을 제공합니다.
chihebnabil/lovable-boilerplate
shadcn/ui, Tailwind, Supabase와 Copilot 및 Cursor용 AI 어시스턴트 지침을 갖춘 React + Vite + TypeScript 보일러플레이트입니다.
- 스타
- 66
- 포크
- 31
- 열린 이슈
- 7
- 마지막 커밋
- 그저께
어떤 프로젝트인가요?
Lovable의 AI 앱 빌더에서 영감을 받은 React 스타터 프로젝트입니다. Vite, React 19, TypeScript, Tailwind CSS와 shadcn/ui 컴포넌트를 제공해, 생성된 UI든 직접 작성한 UI든 개발자가 코드를 바로 읽고 수정하고 확장할 수 있습니다.
Supabase 클라이언트 파일과 생성된 데이터베이스 타입을 통해 Supabase를 바로 사용할 수 있으며, 쿼리, 실시간 구독, 이메일/비밀번호 인증 호출 예제도 포함되어 있습니다. 로컬 개발을 위한 Supabase CLI 설정과 migrations 폴더도 제공됩니다. 데이터 페칭에는 TanStack Query를, 폼 처리에는 React Hook Form과 Zod를 사용합니다.
저장소에는 .github/instructions 아래에 GitHub Copilot과 Cursor용 전역 지침 파일이 있습니다. 레이아웃, 스타일링, 컴포넌트 작성 규칙을 다뤄 AI 어시스턴트가 프로젝트의 패턴을 따르도록 합니다.
핵심 기능
- 01개발 및 빌드를 위한 TypeScript 기반 Vite와 React 19.
- 02src/components/ui에 미리 설정된 shadcn/ui 컴포넌트 40개 이상.
- 03백엔드 작업을 위한 Supabase 클라이언트, 생성된 타입, migrations 폴더.
- 04데이터 페칭을 위한 TanStack Query와 폼 처리를 위한 React Hook Form 및 Zod.
- 05프로젝트 규칙을 설명하는 Copilot 및 Cursor 지침 파일.
활용 사례
- shadcn/ui 디자인 시스템과 Supabase 백엔드를 사용하는 React 웹 앱 시작하기.
- 생성된 UI를 대폭 수정할 프로토타입 만들기.
- AI 코딩 어시스턴트가 일관된 스타일 규칙을 따르도록 프로젝트 설정하기.
빠른 시작
- 1
저장소를 클론합니다
git clone https://github.com/chihebnabil/lovable-boilerplate.git - 2
프로젝트 폴더로 이동합니다
cd lovable-boilerplate - 3
종속성을 설치합니다
npm install - 4
개발 서버를 시작합니다(http://localhost:8080에서 실행)
npm run dev
사용 전 알아둘 점
- Supabase 기능을 사용하려면 직접 만든 Supabase 프로젝트와 .env 파일의 인증 정보가 필요합니다.
- 로컬 Supabase 명령을 실행하려면 Docker가 필요합니다.
토픽
자주 묻는 질문
- lovable-boilerplate은(는) 무엇인가요?
- shadcn/ui, Tailwind, Supabase와 Copilot 및 Cursor용 AI 어시스턴트 지침을 갖춘 React + Vite + TypeScript 보일러플레이트입니다. Lovable의 AI 앱 빌더에서 영감을 받은 React 스타터 프로젝트입니다. Vite, React 19, TypeScript, Tailwind CSS와 shadcn/ui 컴포넌트를 제공해, 생성된 UI든 직접 작성한 UI든 개발자가 코드를 바로 읽고 수정하고 확장할 수 있습니다.
- lovable-boilerplate은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- lovable-boilerplate은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- lovable-boilerplate은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. lovable-boilerplate의 마지막 커밋은 2026년 11월 4일입니다.
- lovable-boilerplate은(는) 어디에 사용할 수 있나요?
- shadcn/ui 디자인 시스템과 Supabase 백엔드를 사용하는 React 웹 앱 시작하기. 생성된 UI를 대폭 수정할 프로토타입 만들기. AI 코딩 어시스턴트가 일관된 스타일 규칙을 따르도록 프로젝트 설정하기.
- lovable-boilerplate는 어떻게 설치하나요?
- 저장소를 클론합니다: git clone https://github.com/chihebnabil/lovable-boilerplate.git 프로젝트 폴더로 이동합니다: cd lovable-boilerplate 종속성을 설치합니다: npm install 개발 서버를 시작합니다(http://localhost:8080에서 실행): npm run dev
- lovable-boilerplate은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/chihebnabil/lovable-boilerplate
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
환경 파일 설정, WP Packages 플러그인 관리, Vite와 Tailwind CSS를 갖춘 Composer 기반 WordPress 보일러플레이트입니다.
Electron, React, TypeScript, Vite로 크로스 플랫폼 데스크톱 앱을 만들기 위한 스타터 템플릿입니다.
Clerk 인증, 멀티테넌시, RBAC, i18n, Drizzle ORM, Tailwind CSS를 갖춘 오픈소스 Next.js SaaS 스타터입니다.
TypeScript, Tailwind CSS v4, 테스트, 린트, 선택적 AWS 배포 인프라를 갖춘 프로덕션용 Next.js 15 스타터 템플릿입니다.
React, shadcn/ui, Supabase로 만든 셀프 호스팅 CRM으로 연락처, 영업 기회, 작업, 메모를 관리합니다.