MOA UI KIT v2.0

🎨 MOA UI KIT v2.0

PHP 개발 & 바이브 코딩에 바로 쓸 수 있는 UI 컴포넌트 라이브러리
체크박스/라디오 대형화 · GRID 시스템 · 스위치 · 토글 · 페이지네이션 · 통계 카드 추가

🧩 컴포넌트 80+ 🎨 색상 테마 8 📋 복사 가능 100% 🌗 다크모드 지원 📐 GRID 12컬럼

📐 Grid System

12컬럼 row/col 시스템 + CSS Grid 유틸리티

12컬럼 Row / Col

col-12

col-6

col-4

col-3

col-2

col-4

col-6

<div class="row">
  <div class="col-6"> ... </div>
  <div class="col-6"> ... </div>
</div>
<!-- col-1 ~ col-12 사용 가능 -->

CSS Grid 유틸리티

grid-2 / item

grid-3

grid-4

grid-auto

<div class="grid grid-3">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>
<!-- grid-2, grid-3, grid-4, grid-auto -->

📊 Stat Cards

12,480

총 사용자

↑ 12.5%

₩8.4M

월 매출

↑ 8.2%

3,241

신규 주문

↓ 3.1%

94.2%

만족도

↑ 1.8%

🔘 Buttons

Solid

Outline

Soft

Gradient · Pill · Sizes · Icon

<button class="btn btn-solid-primary">Primary</button>
<button class="btn btn-outline-success btn-pill">Pill</button>
<button class="btn btn-soft-danger btn-sm">Small</button>
<button class="btn btn-gradient-1 btn-lg">Large</button>

🏷️ Badges & Tags

Soft Badges

Primary Success Danger Warning Info Dark

Solid · Pill · Dot

신규 온라인 오프라인 대기

Tags / Chips

기본 Primary × Success × Danger ×

Breadcrumb

🔔 Alerts & Toast

이것은 Primary 알림입니다.

성공! 작업이 완료되었습니다.

오류! 문제가 발생했습니다.

경고! 입력 내용을 확인해 주세요.

정보: 유용한 정보를 확인하세요.

🃏 Cards

기본 카드

카드 본문 텍스트입니다. 주요 내용을 간략하게 설명합니다.

헤더 카드

헤더와 푸터가 있는 카드입니다.

2025-01-01 업데이트

그라데이션 카드

그라데이션 배경이 적용된 카드입니다.

Primary

상단 테두리 강조

Success

성공 상태 강조

Danger

위험 상태 강조

🪟 Modals

<div id="myModal" class="modal-overlay">
  <div class="modal">
    <div class="modal-header">
      제목
      <button class="modal-close" onclick="document.getElementById('myModal').classList.remove('open')">&times;</button>
    </div>
    <div class="modal-body">내용</div>
    <div class="modal-footer">
      <button class="btn btn-solid-light btn-sm">취소</button>
      <button class="btn btn-solid-primary btn-sm">확인</button>
    </div>
  </div>
</div>

📁 Tabs

언더라인 탭

홈 탭 콘텐츠입니다. 메인 페이지 내용을 여기에 표시합니다.

프로필 탭 콘텐츠입니다. 사용자 정보를 여기에 표시합니다.

설정 탭 콘텐츠입니다. 환경 설정 항목을 여기에 표시합니다.

Pill 탭

전체 항목을 표시합니다.

활성 항목만 표시합니다.

종료된 항목을 표시합니다.

▼ Dropdowns

👤 Avatars

크기 & 모양

A

B

C

D

E

F

그룹

A

B

C

+5

툴팁 예시

📊 Progress

기본75%

성공60%

위험40%

줄무늬 (애니)85%

Large55%

⏳ Spinners

📋 List Group

📄 Pagination

...

<div class="pagination">
  <button class="page-btn">«</button>
  <button class="page-btn active">1</button>
  <button class="page-btn">2</button>
  <button class="page-btn">»</button>
</div>

📝 Form Elements

기본 입력 필드

이름 *

이메일

올바른 이메일 형식입니다

비밀번호

8자 이상 입력해 주세요

비활성화

크기

플로팅 라벨 & 기타

이름을 입력하세요

이메일 주소

셀렉트

텍스트에어리어

최대 500자까지 입력 가능합니다

입력 그룹

@

₩ .00

https://

✅ Checkboxes & Radios

기본(20px) · 대형(26px) · 특대(32px) · 색상 변형 지원

색상 체크박스

Primary Success Danger Warning Info Dark

색상 라디오

Primary Success Danger Warning Info

라디오 토글 그룹

왼쪽 가운데 오른쪽

<!-- 기본(20px) -->
<label class="form-check">
  <input type="checkbox"> <span class="form-check-label">체크박스</span>
</label>

<!-- 대형(26px) -->
<label class="form-check">
  <input type="checkbox" class="check-lg"> ...
</label>

<!-- 특대(32px) -->
<label class="form-check">
  <input type="checkbox" class="check-xl"> ...
</label>

<!-- 색상 -->
<label class="form-check">
  <input type="checkbox" class="check-lg check-success"> ...
</label>

🔛 Switches

토글 스위치 — 기본/대형 · 색상 변형

기본 스위치 (44px)

활성화 비활성 비활성화 (disabled)

대형 스위치 (56px)

대형 활성 대형 비활성

색상 스위치

Primary Success Danger Warning

<label class="form-switch">
  <input type="checkbox" class="switch-input" checked>
  <span class="form-check-label">활성화</span>
</label>

<!-- 대형 -->
<input type="checkbox" class="switch-input switch-lg">

<!-- 색상 -->
<input type="checkbox" class="switch-input switch-success">

📋 Tables

기본 테이블

#	이름	이메일	상태
1	홍길동	hong@example.com	활성
2	김철수	kim@example.com	대기
3	이영희	lee@example.com	비활성

줄무늬 테이블

상품명	카테고리	가격	재고	상태
무선 헤드폰	전자제품	₩99,000	120	활성
러닝화	신발	₩59,990	80	활성
스마트워치	웨어러블	₩129,000	0	품절
게이밍 마우스	액세서리	₩39,500	250	활성

테두리 & 정렬 가능 테이블

이름	부서	직위	입사일
김민준	개발팀	팀장	2020-03-01
이서연	디자인팀	선임	2021-07-15
박지훈	마케팅팀	사원	2023-01-02

컬럼 줄무늬 테이블

항목	1월	2월	3월	합계
매출	₩2.1M	₩1.8M	₩2.4M	₩6.3M
비용	₩1.2M	₩1.0M	₩1.3M	₩3.5M
순이익	₩0.9M	₩0.8M	₩1.1M	₩2.8M

작은 테이블 (table-sm)

KEY	VALUE
PHP 버전	8.2
DB	MySQL 8.0
프레임워크	없음 (바닐라 PHP)

🎨 CSS 변수 참조

:root {
  --primary: #6366f1;
  --success: #10b981;
  --danger:  #ef4444;
  --warning: #f59e0b;
  --info:    #06b6d4;
  --border:  #e2e8f0;
  --text:    #1e293b;
  --text-muted: #64748b;
  --radius:  8px;
  --radius-lg: 12px;
}

/* 다크모드 */
[data-theme="dark"] {
  --primary: #818cf8;
  ...
}