Vue와 React를 모두 지원하는 TailwindCSS 기반 이커머스 UI 라이브러리 및 디자인 시스템
중간맛 분석
TailwindCSS 기반의 프레임워크-무관 UI 라이브러리로, Vue 3, React를 모두 지원합니다. 기본 컴포넌트(Button, Input, Checkbox, Modal 등)와 이커머스 특화 블록(ProductCard, 결제 단계 등)을 제공하며, 복잡한 커스터마이징이 필요한 대규모 프로젝트에 최적화되어 있습니다. Tailwind preset과 TypeScript, Composables(useDropdown 등)를 함께 제공하고, Figma 디자인 킷이 포함되어 있어 바로 프로덕션에 적용할 수 있습니다.
이런 레포예요
이럴 때 쓰면 좋아요
- 이커머스 플랫폼의 빠른 UI 개발 및 프로토타이핑
- 다중 프로젝트에서 통일된 디자인 시스템 운영
- 접근성과 성능이 중요한 대규모 쇼핑몰 구축
핵심 기능
대안 대비 차별점
일반적인 UI 라이브러리와 달리 이커머스에 최적화된 사전 빌트 컴포넌트와 복사-붙여넣기 가능한 블록을 제공하며, Figma 디자인 킷으로 디자인-개발 일관성을 보장하고, 복잡한 맞춤화 시나리오에서도 성능 저하 없이 확장 가능합니다.
준비물
- Node.js
- yarn
바로 시작하기
- 루트 디렉토리에서 의존성을 설치합니다.
yarn
- 개발 서버를 실행합니다 (Vue용 Nuxt와 React용 Next 프리뷰가 함께 시작됩니다).
yarn dev
- Vue만 실행하려면 Vue 프리뷰 디렉토리에서:
cd apps/preview/nuxt
yarn dev
- React만 실행하려면 React 프리뷰 디렉토리에서:
cd apps/preview/next
yarn dev
-
필요한 하위 의존성들이 자동으로 빌드됩니다 (@storefront-ui/shared, @storefront-ui/tw-plugin-peer-next, @storefront-ui/typography).
-
로컬 프로젝트가 준비되면 공식 문서(https://docs.storefrontui.io/v2/)를 참고하여 시작합니다.
별 추이 · 7일
활용성 · 따라 만들기 좋은가
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
🟢 최근 활동 있음 · 2019년 생성
이 레포에 깃밥 배지 달기
[](https://www.gitbap.com/r/vuestorefront/storefront-ui)🔌 클로드에서 바로 써보기
깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.
클로드 설정 → 커넥터에 이 주소를 붙여넣기.
https://www.gitbap.com/api/mcp플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI가 README 기반으로 요약했습니다 · 원문 보기