Component HIG

OnetheTheme

Component Preview

모든 UI 컴포넌트를 상태별로 확인합니다.

Inputs

Buttons

HIG Variants

Elevated

Sizes

With Icon

States

Button States

Input States

필수 항목입니다.

Feedback

Banner (Alert)

Info

정보 알림 메시지입니다.

Success

작업이 완료되었습니다.

Warning

주의가 필요합니다.

Error

오류가 발생했습니다.

Snackbar

저장되었습니다.
업로드에 실패했습니다.
새 업데이트가 있습니다.

Chip (Badge)

Brand Secondary Success Warning Error Info Neutral
v1.0 Stable Beta Draft

Progress Bar

Upload72%
Processing45%
Complete100%
Error30%

Spinner

Skeleton Loading

Layout

Card

Elevated Card

카드 설명 텍스트가 들어갑니다.

Filled Card

아이콘이 포함된 피처 카드 스타일.

Tonal Card

톤 배경으로 강조된 카드.

Modal (Dialog)

Modal Title

정말로 이 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.

Tabs

Tab 1 패널의 콘텐츠가 여기에 표시됩니다.

Pill Tabs

Drawer

Accordion

Accordion Item 1
아코디언 패널의 콘텐츠입니다.
FAQ: 설치 방법
npm install로 설치 후 CSS를 import 하세요.
FAQ: 커스터마이징
theme.css의 CSS 변수를 수정하세요.
FAQ: 브라우저 지원
Chrome, Firefox, Safari, Edge를 지원합니다.

Navigation

Navbar

L
Logo

Breadcrumb

Pagination

120개 중 1-10

Tooltip

Button Tooltips

Direction Variants

Top
Bottom
Left
Right

Color Variants

Info
Success
Warning
Error

Advanced Data Table

Sortable & Filterable Table

8명 표시
이름 이메일 역할 상태 가입일
김지수
jisoo@example.com 관리자 Active 2024-01-15
이민호
minho@example.com 편집자 Active 2024-03-22
박서연
seoyeon@example.com 뷰어 Pending 2024-06-10
최현우
hyunwoo@example.com 편집자 Inactive 2023-11-05
정수빈
subin@example.com 관리자 Active 2024-08-18
한소희
sohee@example.com 뷰어 Active 2024-09-01
강다니엘
daniel@example.com 편집자 Active 2024-05-14
윤아름
areum@example.com 관리자 Active 2024-02-28
총 8명

Rich Text Editor

Full Editor

OnetheTheme

이것은 리치 텍스트 에디터 컴포넌트의 미리보기입니다. 실제 프로젝트에서 contenteditable 또는 전문 에디터 라이브러리를 사용할 수 있습니다.

  • 서식 도구 모음 (Bold, Italic, Underline, Strikethrough)
  • 정렬 옵션 (왼쪽, 가운데, 양쪽)
  • 링크, 이미지, 코드 블록 삽입
  • Undo / Redo 지원

에디터에서 자유롭게 텍스트를 입력하고 서식을 적용해보세요.

Markdown 지원 자동 저장 활성
126 / 5000자

Preview

컴포넌트들을 조합하여 실제 서비스에서 사용되는 페이지 형태로 구성한 샘플입니다.

Dashboard

통계 카드, 데이터 테이블, 차트 영역을 조합한 관리자 대시보드 레이아웃.

Apple HIG Dashboard
JK
Home Dashboard

Overview

Total Users

24,580

+12.5% from last month

Revenue

$48,290

+8.2% from last month

Orders

1,842

-3.1% from last month

Conversion

3.24%

+0.8% from last month

Revenue Overview

Jan
Feb
Mar
Apr
May
Jun
Jul
Aug

Recent Activity

New order #1284 placed

2 min ago

User "emily_k" registered

15 min ago

Server CPU usage at 89%

32 min ago

Payment failed for #1279

1 hr ago

Recent Orders

Order Customer Amount Status
#1284 Kim Minjun $320.00 Completed
#1283 Lee Soojin $185.50 Pending
#1282 Park Jiwoo $540.00 Shipping
#1281 Choi Yuna $92.00 Cancelled

Settings

프로필 편집, 알림 설정, 계정 관리를 포함한 설정 페이지 레이아웃.

Account Settings

Manage your profile, notifications, and preferences.

Profile Information

JK

Jung Kihoon

kihoon@example.com

Notifications

Email Notifications

Receive email updates for new activity

Push Notifications

Get push notifications on your devices

Marketing Emails

Receive tips, product updates, and offers

Danger Zone

Once you delete your account, there is no going back. Please be certain.

Article

Hero, 본문, 이미지 갤러리, 댓글, 관련 글을 포함한 블로그 아티클 레이아웃.

Design Apple HIG

Building Modern UIs with Apple HIG

A comprehensive guide to Apple's Human Interface Guidelines

SY

Song Yerin

Feb 14, 2026 · 8 min read

Apple's Human Interface Guidelines (HIG) represent the gold standard for platform-native design. With its emphasis on clarity, deference, and depth, HIG provides a comprehensive framework for building beautiful, intuitive user interfaces.

Key Principles

The new system is built around three core principles that guide every design decision:

Note

Apple HIG recommends using system colors and SF Symbols for consistent cross-platform experiences across iOS, macOS, and visionOS.

  1. Clarity — Text is legible, icons are precise, and adornments are subtle
  2. Deference — Fluid motion and crisp interfaces help people understand content
  3. Depth — Visual layers and realistic motion convey hierarchy and facilitate understanding

Component Showcase

Here's a quick look at the updated component library:

Button Variants

<button class="px-5 py-2.5 bg-brand text-white
  rounded-lg text-sm font-medium">
  Filled Button
</button>

The rounded-lg class creates the distinctive rounded rectangle shape that defines HIG buttons, while the system color palette provides consistent, accessible color combinations across all Apple platforms.

Gallery

#AppleHIG #TailwindCSS #UIDesign #Frontend #AppleDesign

Comments (3)

MJ

Kim Minjun

2 hours ago

Great article! The dynamic color feature is really exciting. Can't wait to try it in my next project.

HE

Lee Hyunee

5 hours ago

The rounded rectangle buttons look so clean. Apple HIG brings a refined, native feel to every element.

ME

Related Articles

System Colors in HIG: A Deep Dive

5 min read

Designing for iOS and macOS with HIG

12 min read

Tailwind + Apple HIG: Best Practices

7 min read

Storybook Component Token

Addon

컴포넌트별 디자인 토큰 매핑을 확인합니다. 각 컴포넌트가 사용하는 토큰과 실제 렌더링을 비교할 수 있습니다.

@tokens Button / Base

TokenValuePreview
--btn-bg-primary#007AFF
--btn-bg-secondary#5856D6
--btn-bg-destructive#FF3B30
--btn-text#FFFFFF
--btn-radius0.625rem
--btn-font-size0.875remAa
--btn-font-weight500Aa
--btn-padding-x1.25rem
--btn-padding-y0.625rem

@tokens Button / States

TokenValuePreview
--btn-hover-bg#0056B3
--btn-focus-ring#007AFF / 30%
--btn-disabled-bg#C6C6C8
--btn-disabled-text#8E8E93

Rendered Component