Components

Jayh 디자인 시스템의 모든 컴포넌트입니다. 각 컴포넌트의 인터랙티브 데모와 코드 예제를 포함합니다. Layout, UI, Form 세 카테고리로 구분됩니다.

All components of the Jayh Design System. Includes interactive demos and code examples for each component. Organized into three categories: Layout, UI, and Form.

Layout Components

Stack

수직 방향으로 요소를 쌓는 레이아웃 컴포넌트. data-gap으로 간격을 제어합니다.

A layout component that stacks elements vertically. Use data-gap to control spacing.

Item 1
Item 2
Item 3
HTML
<div class="jayh-stack" data-gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Cluster

수평 방향으로 요소를 나열하는 레이아웃 컴포넌트. data-justify로 정렬을 제어합니다.

A layout component that arranges elements horizontally. Use data-justify to control alignment.

A
B
C
HTML
<div class="jayh-cluster" data-gap="sm" data-justify="start">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Grid

반응형 그리드 레이아웃. --jayh-grid-min으로 최소 열 너비를 제어하며, auto-fill로 자동 열 수 조절.

Responsive grid layout. Use --jayh-grid-min to control minimum column width, with auto-fill for automatic column count.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

HTML
<div class="jayh-grid" data-gap="md" style="--jayh-grid-min: 280px">
  <div class="jayh-card">Card 1</div>
  <div class="jayh-card">Card 2</div>
  <div class="jayh-card">Card 3</div>
</div>

Container

콘텐츠를 중앙 정렬하고 최대 너비를 제한하는 래퍼. data-size로 크기를 선택합니다.

A wrapper that centers content and limits maximum width. Use data-size to select the size.

Container content area

HTML
<div class="jayh-container" data-size="md">
  <!-- 콘텐츠 -->
</div>

UI Components

Button

다양한 변형과 크기를 지원하는 버튼 컴포넌트. data-variant와 data-size로 제어합니다.

A button component supporting various variants and sizes. Controlled via data-variant and data-size.

Variants

All Variants

Sizes

States

HTML
<button class="jayh-btn" data-variant="primary" data-size="md">Button</button>
<button class="jayh-btn" data-variant="secondary">Secondary</button>
<button class="jayh-btn" data-variant="destructive">Destructive</button>
<button class="jayh-btn" data-variant="ghost">Ghost</button>

<!-- States -->
<button class="jayh-btn" data-variant="primary" disabled>Disabled</button>
<button class="jayh-btn" data-variant="primary" data-loading>Loading...</button>
<button class="jayh-btn" data-variant="primary" data-full-width>Full Width</button>

Card

콘텐츠를 그룹화하는 카드 컴포넌트. data-variant로 스타일을 변경합니다.

A card component for grouping content. Use data-variant to change the style.

Card Title

카드 내부에 자유롭게 콘텐츠를 배치할 수 있습니다. 내부 패딩은 24px입니다.

You can freely place content inside the card. Internal padding is 24px.

HTML
<div class="jayh-card">
  <div class="jayh-stack" data-gap="sm">
    <strong>Card Title</strong>
    <p>Card content</p>
    <button class="jayh-btn" data-variant="primary">Action</button>
  </div>
</div>

<div class="jayh-card" data-variant="flat">...</div>
<div class="jayh-card" data-variant="elevated">...</div>

Badge

상태나 카테고리를 표시하는 배지. data-variant와 data-size를 지원합니다.

A badge for displaying status or category. Supports data-variant and data-size.

Default

All Variants

Default Info Success Warning Error
HTML
<span class="jayh-badge">Default</span>
<span class="jayh-badge" data-variant="info">Info</span>
<span class="jayh-badge" data-variant="success">Success</span>
<span class="jayh-badge" data-variant="warning">Warning</span>
<span class="jayh-badge" data-variant="error">Error</span>

<!-- Small size -->
<span class="jayh-badge" data-variant="info" data-size="sm">Small</span>

Alert

사용자에게 정보, 성공, 경고, 에러를 알리는 알럿 컴포넌트.

An alert component for conveying info, success, warning, and error messages to users.

이것은 알림 메시지입니다. 중요한 정보를 사용자에게 전달합니다.
This is a notification message. It conveys important information to the user.

All Variants

정보: 새 버전이 출시되었습니다.
성공: 프로필이 저장되었습니다.
경고: 저장공간이 부족합니다.
오류: 2개의 오류를 수정해주세요.
Info: A new version has been released.
Success: Your profile has been saved.
Warning: Storage space is running low.
Error: Please fix 2 errors.

Dismissible Alert

닫을 수 있는 알림입니다.
This is a dismissible alert.
HTML
<div class="jayh-alert" data-variant="info">알림 메시지</div>
<div class="jayh-alert" data-variant="success">성공 메시지</div>
<div class="jayh-alert" data-variant="warning">경고 메시지</div>
<div class="jayh-alert" data-variant="error">오류 메시지</div>

Dialog

모달 다이얼로그. 네이티브 <dialog> 요소 기반. 제목/본문/푸터 3영역 구조.

Modal dialog. Based on the native <dialog> element. Three-section structure: header, body, and footer.

다이얼로그 제목
Dialog Title

다이얼로그 본문 내용입니다. 여기에 폼이나 확인 메시지를 배치합니다.

This is the dialog body content. Place forms or confirmation messages here.
HTML
<button class="jayh-btn" data-variant="primary"
  onclick="document.getElementById('my-dialog').showModal()">
  Open Dialog
</button>

<dialog class="jayh-dialog" id="my-dialog">
  <header class="jayh-dialog-header">제목</header>
  <div class="jayh-dialog-body">
    <p>본문 내용</p>
  </div>
  <footer class="jayh-dialog-footer">
    <div class="jayh-cluster" data-gap="sm" data-justify="end">
      <button class="jayh-btn" data-variant="secondary"
        onclick="document.getElementById('my-dialog').close()">취소</button>
      <button class="jayh-btn" data-variant="primary"
        onclick="document.getElementById('my-dialog').close()">확인</button>
    </div>
  </footer>
</dialog>

Tabs

탭 네비게이션. jayh-tabs, jayh-tab-list, jayh-tab, jayh-tab-panel로 구성.

Tab navigation. Composed of jayh-tabs, jayh-tab-list, jayh-tab, and jayh-tab-panel.

개요 탭의 내용입니다. 제품의 주요 특징과 설명을 포함합니다.

Content of the Overview tab. Includes key features and descriptions of the product.

HTML
<div class="jayh-tabs">
  <div class="jayh-tab-list" role="tablist">
    <button class="jayh-tab" role="tab" aria-selected="true">개요</button>
    <button class="jayh-tab" role="tab" aria-selected="false">사양</button>
    <button class="jayh-tab" role="tab" aria-selected="false">리뷰</button>
  </div>
  <div class="jayh-tab-panel" role="tabpanel">개요 내용</div>
  <div class="jayh-tab-panel" role="tabpanel" hidden>사양 내용</div>
  <div class="jayh-tab-panel" role="tabpanel" hidden>리뷰 내용</div>
</div>

Form Components

Input

텍스트 입력 필드. 라벨, 힌트, 에러 메시지 등 다양한 상태를 지원합니다.

Text input field. Supports various states including labels, hints, and error messages.

Default

With Hint

영문, 숫자, 특수문자를 포함해야 합니다
Must include letters, numbers, and special characters

Error State

올바른 이메일 형식을 입력해주세요 (예: name@example.com)
Please enter a valid email address (e.g., name@example.com)

Disabled

Textarea

HTML
<!-- Default -->
<div class="jayh-field">
  <label class="jayh-label">이름</label>
  <input class="jayh-input" type="text" placeholder="홍길동" />
</div>

<!-- With Hint -->
<div class="jayh-field">
  <label class="jayh-label">비밀번호<span class="jayh-required">*</span></label>
  <input class="jayh-input" type="password" />
  <span class="jayh-hint">8자 이상</span>
</div>

<!-- Error -->
<div class="jayh-field" data-error>
  <label class="jayh-label">이메일</label>
  <input class="jayh-input" type="email" />
  <span class="jayh-error">올바른 이메일 형식이 아닙니다</span>
</div>

<!-- Textarea -->
<div class="jayh-field">
  <label class="jayh-label">소개</label>
  <textarea class="jayh-input" rows="3"></textarea>
</div>

Checkbox

체크박스. 다중 선택에 사용합니다.

Checkbox. Used for multiple selections.

HTML
<label class="jayh-checkbox">
  <input type="checkbox" />
  <span>라벨 텍스트</span>
</label>

<label class="jayh-checkbox">
  <input type="checkbox" checked />
  <span>체크됨</span>
</label>

<label class="jayh-checkbox">
  <input type="checkbox" disabled />
  <span>비활성</span>
</label>

Radio

라디오 버튼. 단일 선택 그룹에 사용합니다.

Radio button. Used for single-selection groups.

알림 설정
Notification Settings
HTML
<div class="jayh-stack" data-gap="sm">
  <label class="jayh-radio">
    <input type="radio" name="notification" value="all" checked />
    <span>모든 알림</span>
  </label>
  <label class="jayh-radio">
    <input type="radio" name="notification" value="important" />
    <span>중요 알림만</span>
  </label>
  <label class="jayh-radio">
    <input type="radio" name="notification" value="none" />
    <span>알림 없음</span>
  </label>
</div>

Select

드롭다운 선택 필드. 일반 상태와 에러 상태를 지원합니다.

Dropdown select field. Supports normal and error states.

Normal

Error State

카테고리를 선택해주세요
Please select a category
HTML
<!-- Normal -->
<div class="jayh-field">
  <label class="jayh-label">역할</label>
  <select class="jayh-select">
    <option value="" disabled selected>역할을 선택하세요</option>
    <option value="admin">관리자</option>
    <option value="user">사용자</option>
  </select>
</div>

<!-- Error -->
<div class="jayh-field" data-error>
  <label class="jayh-label">카테고리<span class="jayh-required">*</span></label>
  <select class="jayh-select">
    <option value="" disabled selected>선택하세요</option>
  </select>
  <span class="jayh-error">카테고리를 선택해주세요</span>
</div>