saadeghi/daisyui

Tailwind CSS를 위한 완성도 높은 무료 오픈소스 UI 컴포넌트 라이브러리

개발 재료맘대로 써도 됨 · MIT디자인·UI 컴포넌트Svelte난이도
41,240+64이번 주0 찜
1,639포크20이슈
데모·홈페이지 열기daisyui.com

중간맛 분석

Tailwind CSS 기반의 완전 무료 컴포넌트 라이브러리로, 버튼·폼·네비게이션·모달 등 50개 이상의 사전 스타일링된 컴포넌트를 제공합니다. 설치로 즉시 사용 가능하며, 라이선스이고 커뮤니티 기여로 지속 업데이트됩니다. 데모는 공식 웹사이트(daisyui.com/components)에서 모든 컴포넌트를 대화형으로 확인할 수 있습니다. 난이도는 낮은 편으로, Tailwind CSS 기본 지식만 있으면 충분합니다.

이런 레포예요

이럴 때 쓰면 좋아요

  • Tailwind CSS 프로젝트에서 빠르게 UI를 구성해야 할 때
  • 디자인 시스템 없이 프로페셔널한 외형의 웹앱을 만들 때
  • 스타트업이나 개인 프로젝트에서 개발 속도를 높이고 싶을 때

핵심 기능

50개 이상의 사전 스타일링 컴포넌트Tailwind CSS 완벽 통합설정 최소화 및 즉시 사용 가능

대안 대비 차별점

Tailwind CSS 기반 UI 라이브러리 중 가장 완성도 높은 무료 오픈소스로, CDN 링크나 간단한 npm 설치만으로 추가 설정 없이 즉시 사용 가능한 반면 Shadcn/ui나 Headless UI는 더 많은 커스터마이징 유연성을 제공합니다.

준비물

  • Tailwind CSS 설치
  • Node.js 환경

바로 시작하기

  1. npm으로 daisyUI 설치
npm install daisyui
  1. tailwind.config.js에 daisyUI 플러그인 추가
# tailwind.config.js 파일을 열어 plugins 배열에 다음을 추가:
# plugins: [require("daisyui")]
  1. 프로젝트에서 daisyUI 컴포넌트 사용
# HTML에서 클래스명으로 컴포넌트 사용 (예: <button class="btn">Click</button>)

별 추이 · 7일

41,240+64 / 7일

활용성 · 따라 만들기 좋은가

샘플 점수 34/100
  • 관대한 라이선스
  • 테스트 있음
  • 예제 디렉토리
  • 최근 활동
  • AGENTS.md
  • llms.txt
  • 템플릿

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

이 레포에 깃밥 배지 달기

[![깃밥](https://www.gitbap.com/badge/saadeghi/daisyui.svg)](https://www.gitbap.com/r/saadeghi/daisyui)

🔌 클로드에서 바로 써보기

깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.

방법 ① 커넥터 URL

클로드 설정 → 커넥터에 이 주소를 붙여넣기.

https://www.gitbap.com/api/mcp
방법 ② 플러그인 (체험까지)

플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.

/plugin marketplace add jakeparkcolde/gitbap-cowork
/plugin install gitbap-cowork@gitbap
연결 방법 자세히 →

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