🎨 MOA UI KIT

바이브 코딩과 PHP 개발에 바로 쓸 수 있는 UI 컴포넌트 라이브러리입니다. 코드 블록 우측의 복사 버튼으로 즉시 붙여넣기 하세요.

Buttons Badges Alerts Cards Modals Forms Tables Tabs
🧩
컴포넌트
50+
🎨
색상 테마
8
📋
복사 가능
100%
🌗
다크모드
지원
Buttons
.btn 클래스를 기반으로 Solid, Outline, Soft, Gradient 스타일을 제공합니다.
기본 Solid 버튼
HTML 
<button class="btn btn-solid-primary">Primary</button>
<button class="btn btn-solid-secondary">Secondary</button>
<button class="btn btn-solid-success">Success</button>
<button class="btn btn-solid-danger">Danger</button>
<button class="btn btn-solid-warning">Warning</button>
<button class="btn btn-solid-info">Info</button>
<button class="btn btn-solid-light">Light</button>
<button class="btn btn-solid-dark">Dark</button>
Outline 버튼
HTML 
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
Soft 버튼
HTML 
<button class="btn btn-soft-primary">Primary</button>
<button class="btn btn-soft-success">Success</button>
<button class="btn btn-soft-danger">Danger</button>
Pill (둥근) 버튼
HTML 
<button class="btn btn-solid-primary btn-pill">Primary</button>
<button class="btn btn-outline-primary btn-pill">Outline</button>
<button class="btn btn-soft-primary btn-pill">Soft</button>
그라데이션 버튼
HTML 
<button class="btn btn-gradient-1">보라 → 남색</button>
<button class="btn btn-gradient-2">청록 → 파랑</button>
<button class="btn btn-gradient-3">핑크 → 오렌지</button>
버튼 크기
HTML 
<button class="btn btn-solid-primary btn-lg">Large</button>
<button class="btn btn-solid-primary">Normal</button>
<button class="btn btn-solid-primary btn-sm">Small</button>
아이콘 버튼
HTML 
<button class="btn btn-solid-primary">
  <i class="fas fa-download"></i> 다운로드
</button>
<button class="btn btn-outline-danger">
  <i class="fas fa-trash"></i> 삭제
</button>
<button class="btn btn-soft-success">
  <i class="fas fa-check"></i> 확인
</button>
<button class="btn btn-solid-dark">
  <i class="fas fa-cog"></i>
</button>
블록(전체 너비) 버튼
HTML 
<button class="btn btn-solid-primary btn-block">블록 버튼</button>
<button class="btn btn-outline-primary btn-block">블록 아웃라인</button>
Badges
작은 카운트 및 레이블 표시에 사용합니다.
기본 뱃지
Primary Success Danger Warning Info Dark
HTML 
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-dark">Dark</span>
Solid 뱃지
Primary Success Danger
HTML 
<span class="badge badge-solid-primary">Primary</span>
<span class="badge badge-solid-success">Success</span>
<span class="badge badge-solid-danger">Danger</span>
Pill 뱃지 + 점 표시
신규 온라인 오프라인 대기중
HTML 
<span class="badge badge-primary badge-pill">신규</span>
<span class="badge badge-success badge-pill badge-dot">온라인</span>
<span class="badge badge-danger badge-pill badge-dot">오프라인</span>
<span class="badge badge-warning badge-pill">대기중</span>
Alerts
사용자에게 맥락에 맞는 피드백 메시지를 표시합니다.
기본 알림
이것은 프라이머리 알림입니다. 중요한 내용을 확인하세요!
성공! 작업이 성공적으로 완료되었습니다.
오류! 문제가 발생했습니다. 다시 시도해 주세요.
경고! 입력 내용을 다시 확인해 주세요.
정보: 유용한 정보를 확인해 보세요.
HTML 
<div class="alert alert-primary">
  <i class="fas fa-info-circle"></i>
  <div>이것은 <strong>프라이머리</strong> 알림입니다.</div>
</div>
<div class="alert alert-success">
  <i class="fas fa-check-circle"></i>
  <div><strong>성공!</strong> 작업이 완료되었습니다.</div>
</div>
<div class="alert alert-danger">
  <i class="fas fa-times-circle"></i>
  <div><strong>오류!</strong> 문제가 발생했습니다.</div>
</div>
<div class="alert alert-warning">
  <i class="fas fa-exclamation-triangle"></i>
  <div><strong>경고!</strong> 입력 내용을 확인해 주세요.</div>
</div>
<div class="alert alert-info">
  <i class="fas fa-info-circle"></i>
  <div><strong>정보:</strong> 유용한 정보를 확인하세요.</div>
</div>
Cards
콘텐츠를 카드 형태로 그룹화합니다.
기본 카드
카드 제목
카드 본문 텍스트입니다. 주요 내용을 간략하게 설명합니다.
HTML 
<div class="card">
  <div class="card-body">
    <div class="card-title">카드 제목</div>
    <div class="card-text">카드 본문 텍스트입니다.</div>
    <button class="btn btn-solid-primary btn-sm">버튼</button>
  </div>
</div>
헤더/푸터가 있는 카드
카드 헤더
본문 텍스트가 들어갑니다. 카드의 주요 내용을 작성하세요.
2025-01-01 업데이트
HTML 
<div class="card">
  <div class="card-header">카드 헤더</div>
  <div class="card-body">
    <div class="card-text">본문 텍스트가 들어갑니다.</div>
    <button class="btn btn-solid-primary btn-sm">확인</button>
  </div>
  <div class="card-footer">2025-01-01 업데이트</div>
</div>
색상 테두리 카드
Primary 카드
상단 테두리 강조
Success 카드
성공 상태 강조
Danger 카드
위험 상태 강조
HTML 
<div class="card card-primary">
  <div class="card-body">
    <div class="card-title">Primary 카드</div>
    <div class="card-text">상단 테두리 강조</div>
  </div>
</div>
<div class="card card-success"> ... </div>
<div class="card card-danger"> ... </div>
그라데이션 카드
그라데이션 카드
그라데이션 배경이 적용된 카드입니다.
HTML 
<div class="card card-gradient">
  <div class="card-body">
    <div class="card-title">그라데이션 카드</div>
    <div class="card-text">그라데이션 배경이 적용된 카드입니다.</div>
    <button class="btn" style="background:rgba(255,255,255,.25);color:#fff;">버튼</button>
  </div>
</div>
Modals
팝업 대화상자 컴포넌트입니다.
기본 모달 구조
모달 제목
모달 본문 텍스트입니다. 사용자에게 전달할 내용을 여기에 작성하세요. 확인이 필요한 중요 내용이나 폼 입력 등을 포함할 수 있습니다.
HTML 
<!-- 모달 트리거 -->
<button class="btn btn-solid-primary" onclick="document.getElementById('myModal').style.display='flex'">
  모달 열기
</button>

<!-- 모달 오버레이 -->
<div id="myModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:100%;max-width:480px;overflow:hidden;">
    <div style="padding:16px 20px;border-bottom:1px solid #e2e8f0;font-weight:700;display:flex;align-items:center;justify-content:space-between;">
      모달 제목
      <button onclick="document.getElementById('myModal').style.display='none'" style="background:none;border:none;cursor:pointer;font-size:18px;">&times;</button>
    </div>
    <div style="padding:20px;font-size:14px;color:#64748b;line-height:1.7;">
      모달 본문 텍스트입니다.
    </div>
    <div style="padding:14px 20px;border-top:1px solid #e2e8f0;display:flex;gap:8px;justify-content:flex-end;">
      <button class="btn btn-solid-light btn-sm" onclick="document.getElementById('myModal').style.display='none'">취소</button>
      <button class="btn btn-solid-primary btn-sm">확인</button>
    </div>
  </div>
</div>
Tabs
콘텐츠를 탭 형태로 전환합니다.
기본 탭
홈 탭 콘텐츠입니다. 메인 페이지 내용을 여기에 표시합니다.
프로필 탭 콘텐츠입니다. 사용자 정보를 여기에 표시합니다.
설정 탭 콘텐츠입니다. 환경 설정 항목을 여기에 표시합니다.
HTML + JS 
<div class="tabs-nav">
  <button class="tab-btn active" onclick="switchTab(this,'tab1')">홈</button>
  <button class="tab-btn" onclick="switchTab(this,'tab2')">프로필</button>
  <button class="tab-btn" onclick="switchTab(this,'tab3')">설정</button>
</div>
<div class="tab-content">
  <div class="tab-pane active" id="tab1">홈 콘텐츠</div>
  <div class="tab-pane" id="tab2">프로필 콘텐츠</div>
  <div class="tab-pane" id="tab3">설정 콘텐츠</div>
</div>

<script>
function switchTab(btn, id) {
  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
  document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
  btn.classList.add('active');
  document.getElementById(id).classList.add('active');
}
</script>
Avatars
사용자 프로필 아바타 컴포넌트입니다.
아바타 크기
A
B
C
HTML 
<div class="avatar avatar-sm">A</div>
<div class="avatar">B</div>
<div class="avatar avatar-lg">C</div>
아바타 그룹
A
B
C
+3
HTML 
<div class="avatar-group">
  <div class="avatar" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)">A</div>
  <div class="avatar" style="background:linear-gradient(135deg,#10b981,#06b6d4)">B</div>
  <div class="avatar" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">C</div>
  <div class="avatar" style="background:#334155">+3</div>
</div>
Progress
진행 상태를 시각적으로 표현합니다.
프로그레스 바
기본75%
성공60%
위험40%
HTML 
<!-- 기본 -->
<div class="progress-wrap">
  <div class="progress-bar" style="width:75%"></div>
</div>

<!-- 성공 색상 -->
<div class="progress-wrap">
  <div class="progress-bar" style="width:60%;background:#10b981"></div>
</div>

<!-- 위험 색상 -->
<div class="progress-wrap">
  <div class="progress-bar" style="width:40%;background:#ef4444"></div>
</div>
Spinners
로딩 상태를 나타내는 스피너입니다.
기본 스피너
HTML + CSS 
<div class="spinner"></div>

<style>
.spinner {
  width: 28px; height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>
Form Elements
다양한 폼 입력 요소들입니다.
기본 입력 필드
HTML 
<div class="form-group">
  <label class="form-label">이름</label>
  <input type="text" class="form-control" placeholder="이름을 입력하세요">
</div>
<div class="form-group">
  <label class="form-label">이메일</label>
  <input type="email" class="form-control" placeholder="email@example.com">
</div>
<div class="form-group">
  <label class="form-label">비활성화</label>
  <input type="text" class="form-control" value="비활성화 필드" disabled>
</div>
셀렉트 & 텍스트에어리어
HTML 
<div class="form-group">
  <label class="form-label">선택</label>
  <select class="form-control">
    <option>옵션 1</option>
    <option>옵션 2</option>
    <option>옵션 3</option>
  </select>
</div>
<div class="form-group">
  <label class="form-label">메모</label>
  <textarea class="form-control" rows="3" placeholder="내용을 입력하세요"></textarea>
</div>
체크박스 & 라디오 & 스위치
체크박스
라디오
HTML 
<!-- 체크박스 -->
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
  <input type="checkbox" checked> 선택됨
</label>
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
  <input type="checkbox"> 미선택
</label>

<!-- 라디오 -->
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
  <input type="radio" name="r1" checked> 옵션 1
</label>
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
  <input type="radio" name="r1"> 옵션 2
</label>
입력 그룹 (Input Group)
@
HTML 
<!-- 접두사 그룹 -->
<div style="display:flex;border:1.5px solid #e2e8f0;border-radius:8px;overflow:hidden;">
  <span style="padding:9px 14px;background:#f1f5f9;color:#64748b;font-size:14px;border-right:1.5px solid #e2e8f0;">@</span>
  <input type="text" style="border:none;outline:none;flex:1;padding:9px 14px;font-size:14px;" placeholder="username">
</div>

<!-- 버튼 그룹 -->
<div style="display:flex;border:1.5px solid #e2e8f0;border-radius:8px;overflow:hidden;">
  <input type="text" style="border:none;outline:none;flex:1;padding:9px 14px;font-size:14px;" placeholder="검색어 입력">
  <button class="btn btn-solid-primary" style="border-radius:0;">검색</button>
</div>
Tables
데이터 테이블 컴포넌트입니다.
기본 테이블
# 이름 이메일 상태 액션
1 홍길동 hong@example.com 활성
2 김철수 kim@example.com 대기
3 이영희 lee@example.com 비활성
HTML 
<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>이름</th>
        <th>이메일</th>
        <th>상태</th>
        <th>액션</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>홍길동</td>
        <td>hong@example.com</td>
        <td><span class="badge badge-success badge-pill">활성</span></td>
        <td><button class="btn btn-solid-primary btn-sm">수정</button></td>
      </tr>
      <tr>
        <td>2</td>
        <td>김철수</td>
        <td>kim@example.com</td>
        <td><span class="badge badge-warning badge-pill">대기</span></td>
        <td><button class="btn btn-outline-danger btn-sm">삭제</button></td>
      </tr>
    </tbody>
  </table>
</div>