Repolode
제출하기
hunvreus

hunvreus/basecoat

React 없이 사용할 수 있는 Tailwind CSS 기반 shadcn/ui 스타일의 순수 HTML/CSS/JavaScript 컴포넌트 구현체입니다.

GitHub에서 보기웹사이트
스타
4,424
포크
147
열린 이슈
6
마지막 커밋
15일 전

어떤 프로젝트인가요?

Basecoat는 Tailwind CSS, 일반 HTML, CSS, JavaScript를 사용해 shadcn/ui 디자인 시스템을 재현하는 컴포넌트 라이브러리입니다. React, Radix 또는 프레임워크 런타임에 의존하지 않으므로 정적 사이트, 서버 렌더링 템플릿, JavaScript 앱 등 어떤 웹 스택에도 컴포넌트를 바로 적용할 수 있습니다.

이 라이브러리는 HTML 우선 방식으로, Tailwind로 스타일을 적용한 시맨틱 마크업과 필요한 경우 동작을 추가하는 소량의 순수 JavaScript로 구성됩니다. 독립형 스타일 팩(Vega, Nova, Maia, Lyra, Mira, Luma, Sera, Rhea)을 제공하며 shadcn/ui 테마와 호환됩니다. 다크 모드도 지원합니다.

Basecoat는 npm, CDN 또는 Nunjucks와 Jinja를 포함한 프로젝트 템플릿을 통해 사용할 수 있습니다. JavaScript API에는 init, initAll, refresh 함수가 있어 프레임워크나 내비게이션 라이브러리가 캐시된 DOM을 복원한 뒤 컴포넌트를 다시 초기화할 수 있습니다.

핵심 기능

  • 01Tailwind CSS v4로 스타일을 적용한 시맨틱 HTML 우선 컴포넌트입니다.
  • 02React나 Radix에 의존하지 않는 순수 JavaScript 동작을 제공합니다.
  • 03독립형 스타일 팩 8종과 스타일이 없는 기본 번들을 제공합니다.
  • 04shadcn/ui 테마와 호환되며 다크 모드를 지원합니다.
  • 05npm, CDN 또는 Nunjucks 및 Jinja 템플릿으로 사용할 수 있습니다.

활용 사례

  • React를 도입하지 않고 서버 렌더링 앱에 shadcn 스타일 UI를 추가합니다.
  • 완성도 높은 컴포넌트로 정적 마케팅 사이트나 문서 사이트를 구축합니다.
  • 스타일이 없는 기본 번들에 직접 만든 스타일 파일을 적용해 맞춤 디자인을 만듭니다.
  • Django, Flask 또는 기타 Jinja 기반 프로젝트에서 일관된 UI 컴포넌트를 사용합니다.

빠른 시작

  1. 1

    npm에서 패키지를 설치합니다

    npm install basecoat-css
  2. 2

    기본 CSS 파일에서 Tailwind와 Basecoat를 가져옵니다

사용 전 알아둘 점

  • 스타일링은 Tailwind CSS에 의존하므로 프로젝트에 Tailwind 설정이 필요합니다.

토픽

#tailwind#component-library#css#vanilla-javascript#html#design-system#dark-mode#shadcn-ui#alpine#components

자주 묻는 질문

basecoat은(는) 무엇인가요?
React 없이 사용할 수 있는 Tailwind CSS 기반 shadcn/ui 스타일의 순수 HTML/CSS/JavaScript 컴포넌트 구현체입니다. Basecoat는 Tailwind CSS, 일반 HTML, CSS, JavaScript를 사용해 shadcn/ui 디자인 시스템을 재현하는 컴포넌트 라이브러리입니다. React, Radix 또는 프레임워크 런타임에 의존하지 않으므로 정적 사이트, 서버 렌더링 템플릿, JavaScript 앱 등 어떤 웹 스택에도 컴포넌트를 바로 적용할 수 있습니다.
basecoat은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
basecoat은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
basecoat은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. basecoat의 마지막 커밋은 2026년 10월 23일입니다.
basecoat은(는) 어디에 사용할 수 있나요?
React를 도입하지 않고 서버 렌더링 앱에 shadcn 스타일 UI를 추가합니다. 완성도 높은 컴포넌트로 정적 마케팅 사이트나 문서 사이트를 구축합니다. 스타일이 없는 기본 번들에 직접 만든 스타일 파일을 적용해 맞춤 디자인을 만듭니다. Django, Flask 또는 기타 Jinja 기반 프로젝트에서 일관된 UI 컴포넌트를 사용합니다.
basecoat는 어떻게 설치하나요?
npm에서 패키지를 설치합니다: npm install basecoat-css 기본 CSS 파일에서 Tailwind와 Basecoat를 가져옵니다
basecoat은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/hunvreus/basecoat

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트