cosscom/coss

Cal.com의 공식 디자인 시스템 - Base UI와 Tailwind CSS 기반의 복사-붙여넣기 컴포넌트 라이브러리

개발 재료조건 있음 · AGPL-3.0웹·Next.js·풀스택난이도
10,092+0이번 주5047TypeScript
데모·홈페이지 열기coss.com
중간맛 분석

스택: TypeScript, Next.js, React, Tailwind CSS, Base UI, TanStack Table

난이도: 중급 (컴포넌트 사용 자체는 쉽지만, 모노레포 구조 이해와 커스터마이징에는 중급 지식 필요)

바로 쓸 수 있나: 예. 컴포넌트를 복사-붙여넣기하거나 패키지로 설치 가능하며, Tailwind 설정이 되어 있으면 즉시 사용 가능

데모: coss.com/ui 웹사이트와 문서 사이트에서 각 컴포넌트의 인터랙티브 예제 확인 가능

이런 레포예요

이럴 때 쓰면 좋아요

  • Cal.com처럼 현대적이고 접근성 높은 UI 시스템이 필요한 SaaS 프로젝트
  • shadcn/ui 방식의 복사-붙여넣기 컴포넌트를 원하면서도 더 견고한 기초가 필요할 때
  • Tailwind + Base UI 스택의 프로덕션급 컴포넌트 참고 자료

핵심 기능

Base UI 기반의 접근성 높은 헤드리스 컴포넌트Tailwind CSS로 스타일링된 완성도 높은 UI 컴포넌트복사-붙여넣기 가능한 사용자 소유 컴포넌트 코드

대안 대비 차별점

Base UI의 견고한 접근성 기초와 완성도 높은 Tailwind 디자인 시스템을 결합했으며, Cal.com이 직접 프로덕션에서 검증 중인 공식 디자인 시스템입니다.

준비물
  • Node.js 또는 Bun 런타임
  • Tailwind CSS 설정된 React 프로젝트
바로 시작하기
  1. 저장소를 클론합니다
git clone https://github.com/cosscom/coss.git
cd coss
  1. 의존성을 설치합니다
bun install
  1. 환경 변수 파일을 생성합니다

apps/www/.env.local:

NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_COSS_UI_URL=http://localhost:4000/ui

apps/ui/.env.local:

NEXT_PUBLIC_APP_URL=http://localhost:4000/ui
NEXT_PUBLIC_COSS_URL=http://localhost:3000
NEXT_PUBLIC_ORIGIN_URL=http://localhost:4001

apps/origin/.env.local:

NEXT_PUBLIC_APP_URL=http://localhost:4001/origin
NEXT_PUBLIC_COSS_URL=http://localhost:3000
NEXT_PUBLIC_COSS_UI_URL=http://localhost:4000/ui
  1. 모든 앱을 개발 모드로 실행합니다
bun run dev
  1. 브라우저에서 다음 URL로 접속합니다
별 추이 · 7일
10,092+0 / 7일
활용성 · 따라 만들기 좋은가
샘플 점수 26/100
  • 관대한 라이선스
  • 테스트 있음
  • 예제 디렉토리
  • 최근 활동
  • AGENTS.md
  • llms.txt
  • 템플릿

🟢 최근 활동 있음 · 2024년 생성

AI가 README 기반으로 요약했습니다 · 원문 보기