DaisyUI v5 Best Practices
핵심 원칙
- 시맨틱 컬러 우선: 하드코딩 색상 대신 DaisyUI 시맨틱 토큰 사용
- 클래스 기반: React 컴포넌트 import 없이 HTML 클래스로 UI 구성
- 테마 일관성: oklch() 컬러 시스템으로 테마 간 일관된 색상 유지
- 최소 JS: CSS-only 솔루션 활용 (modal, collapse, swap)
shadcn → DaisyUI 빠른 변환
Button variant="default" → btn btn-primary
Button variant="ghost" → btn btn-ghost
Button variant="outline" → btn btn-outline
Button variant="destructive" → btn btn-error
Card → card bg-base-100 shadow-xl
Badge → badge
Input → input input-bordered w-full
Dialog → modal (HTML dialog)
Tabs → tabs tabs-bordered
Switch → toggle
Separator → divider
Skeleton → skeleton
Sheet → drawer
색상 전환
bg-black → bg-base-100 (다크 테마에서)
text-white → text-base-content
text-zinc-400 → text-base-content/60
bg-zinc-800 → bg-base-200
border-zinc-700 → border-base-300
컴포넌트 카탈로그 요약
| 카테고리 |
컴포넌트 |
| Layout |
navbar, drawer, footer, hero |
| Navigation |
menu, tabs, breadcrumbs, pagination |
| Data Display |
card, table, stat, countdown, timeline |
| Input |
button, input, select, textarea, checkbox, toggle, range |
| Feedback |
alert, toast, loading, progress, skeleton, tooltip |
| Overlay |
modal, dropdown, swap, collapse |
테마 설정 (globals.css)
@plugin "daisyui" {
themes: light --default, dark --prefersdark,
my_theme {
primary: oklch(0.7 0.2 75);
secondary: oklch(0.6 0.15 250);
accent: oklch(0.75 0.18 150);
neutral: oklch(0.3 0.01 260);
base-100: oklch(0.98 0.005 260);
base-200: oklch(0.93 0.005 260);
base-300: oklch(0.88 0.005 260);
base-content: oklch(0.2 0.01 260);
};
}
커맨드
/fireauto-ui — 3가지 모드 (build, migrate, theme)
추가 리소스
- 컴포넌트 패턴 상세:
references/components.md
- 마이그레이션 치트시트:
references/migration-cheatsheet.md
- oklch 색상 참조:
references/oklch-colors.md
1---2name: fireauto-ui-guide3description: "DaisyUI", "daisyui", "UI 마이그레이션", "UI migration", "shadcn to daisyui", "테마 설정", "theme", "컴포넌트 변환", "DaisyUI 테마", "DaisyUI 컴포넌트" 등 DaisyUI 기반 UI 구축이나 shadcn/ui 마이그레이션 시 사용하세요.4---56# DaisyUI v5 Best Practices78## 핵심 원칙9101. **시맨틱 컬러 우선**: 하드코딩 색상 대신 DaisyUI 시맨틱 토큰 사용112. **클래스 기반**: React 컴포넌트 import 없이 HTML 클래스로 UI 구성123. **테마 일관성**: oklch() 컬러 시스템으로 테마 간 일관된 색상 유지134. **최소 JS**: CSS-only 솔루션 활용 (modal, collapse, swap)1415## shadcn → DaisyUI 빠른 변환1617```18Button variant="default" → btn btn-primary19Button variant="ghost" → btn btn-ghost20Button variant="outline" → btn btn-outline21Button variant="destructive" → btn btn-error22Card → card bg-base-100 shadow-xl23Badge → badge24Input → input input-bordered w-full25Dialog → modal (HTML dialog)26Tabs → tabs tabs-bordered27Switch → toggle28Separator → divider29Skeleton → skeleton30Sheet → drawer31```3233## 색상 전환3435```36bg-black → bg-base-100 (다크 테마에서)37text-white → text-base-content38text-zinc-400 → text-base-content/6039bg-zinc-800 → bg-base-20040border-zinc-700 → border-base-30041```4243## 컴포넌트 카탈로그 요약4445| 카테고리 | 컴포넌트 |46|----------|----------|47| Layout | navbar, drawer, footer, hero |48| Navigation | menu, tabs, breadcrumbs, pagination |49| Data Display | card, table, stat, countdown, timeline |50| Input | button, input, select, textarea, checkbox, toggle, range |51| Feedback | alert, toast, loading, progress, skeleton, tooltip |52| Overlay | modal, dropdown, swap, collapse |5354## 테마 설정 (globals.css)5556```css57@plugin "daisyui" {58 themes: light --default, dark --prefersdark,59 my_theme {60 primary: oklch(0.7 0.2 75);61 secondary: oklch(0.6 0.15 250);62 accent: oklch(0.75 0.18 150);63 neutral: oklch(0.3 0.01 260);64 base-100: oklch(0.98 0.005 260);65 base-200: oklch(0.93 0.005 260);66 base-300: oklch(0.88 0.005 260);67 base-content: oklch(0.2 0.01 260);68 };69}70```7172## 커맨드7374- `/fireauto-ui` — 3가지 모드 (build, migrate, theme)7576## 추가 리소스7778- 컴포넌트 패턴 상세: `references/components.md`79- 마이그레이션 치트시트: `references/migration-cheatsheet.md`80- oklch 색상 참조: `references/oklch-colors.md`
imgompanda