컴포넌트
HUA UI의 모든 컴포넌트를 한눈에 확인하세요.
설치
코어
12 레지스트리 기반 항목
다양한 스타일, 크기, 로딩 상태, 호버 효과를 지원하는 다용도 버튼 컴포넌트입니다.
파티클, 리플, 사운드, 햅틱 피드백 등의 고급 효과를 가진 액션 버튼입니다. Button 컴포넌트 기반입니다.
눌림 상태를 가지는 토글 버튼 컴포넌트입니다. Switch와 달리 버튼 형태로 표시됩니다.
외부 링크와 다양한 스타일 변형을 지원하는 링크 컴포넌트입니다.
에러 상태 처리와 포커스 관리가 내장된 스타일링된 텍스트 입력 컴포넌트입니다.
레이블, 카테고리 또는 상태를 표시하는 작은 상태 표시 컴포넌트. React.memo로 최적화됨.
사용자 프로필 이미지를 표시하는 컴포넌트입니다. 이미지가 없을 경우 이니셜을 표시합니다.
다양한 시각적 스타일로 중요한 정보, 경고 또는 피드백을 사용자에게 표시하는 컴포넌트입니다.
여러 아이콘 라이브러리(Phosphor, Lucide, Iconsax)를 지원하는 통합 아이콘 컴포넌트입니다.
dot 스타일링을 지원하는 레이아웃 프리미티브 컴포넌트.
시맨틱 HTML 요소와 dot 스타일링을 지원하는 타이포그래피 프리미티브.
누름 피드백, WCAG 터치 타겟, dot 스타일링이 내장된 인터랙티브 프리미티브.
레이아웃
8 레지스트리 기반 항목
헤더, 콘텐츠, 푸터 섹션이 있는 관련 콘텐츠 그룹화를 위한 유연한 컨테이너 컴포넌트입니다.
최대 너비, 패딩, 중앙 정렬을 설정할 수 있는 반응형 컨테이너 컴포넌트입니다.
반응형 열과 간격을 설정할 수 있는 CSS 그리드 레이아웃 컴포넌트입니다.
수직 또는 수평 배치를 위한 Flexbox 기반 스택 레이아웃 컴포넌트입니다.
다양한 방향, 스타일, 색상을 지원하는 콘텐츠 구분선 컴포넌트입니다.
10가지 이상의 비주얼 스타일, 효과, 인터랙티브 기능을 가진 고급 패널 컴포넌트입니다.
선택적 헤더 구성과 dot 스타일링을 지원하는 시맨틱 섹션 컴포넌트.
장문 콘텐츠를 위한 타이포그래피 기본값이 적용된 리치 텍스트 컨테이너.
폼
14 레지스트리 기반 항목
구조화되고 접근성 있는 폼을 만들기 위한 폼 컨테이너 컴포넌트입니다. FormField와 FormGroup을 함께 사용합니다.
필수 필드 표시, 에러 상태, 변형을 지원하는 폼 필드 레이블 컴포넌트입니다.
레이블, 설명, 에러 처리를 포함한 폼 필드 래퍼입니다.
레이블, 설명, 다양한 스타일 옵션을 지원하는 체크박스 컴포넌트입니다.
그룹 내 단일 선택을 위한 라디오 버튼 컴포넌트입니다.
다양한 스타일, 크기, 상태를 지원하는 드롭다운 선택 컴포넌트입니다.
켜기/끄기 상태를 위한 토글 스위치 컴포넌트입니다.
단일 값 또는 범위 모드를 지원하는 숫자 값 선택용 슬라이더 컴포넌트입니다.
자동 크기 조절과 글자 수 표시 옵션이 있는 멀티라인 텍스트 입력 컴포넌트입니다.
커스텀 증감 버튼과 범위 유효성 검사가 있는 숫자 입력 컴포넌트입니다.
커스텀 포맷과 날짜 범위 제한을 지원하는 캘린더 기반 날짜 선택 컴포넌트입니다.
필터링, 키보드 탐색, 비동기 검색, 아이콘 커스텀 옵션을 지원하는 자동완성 입력 컴포넌트입니다.
드래그 앤 드롭을 지원하는 파일 업로드 컴포넌트입니다. 파일 타입 필터링, 용량 제한, 업로드 진행률 표시 등을 지원합니다.
Tailwind CSS 프리셋과 커스텀 HSL 피커가 있는 탭 기반 컬러 피커입니다. 외부 의존성이 없습니다.
데이터 표시
3 레지스트리 기반 항목
내비게이션
5 레지스트리 기반 항목
오버레이
6 레지스트리 기반 항목
인터랙티브
7 레지스트리 기반 항목
피드백
4 레지스트리 기반 항목
유틸리티
10 레지스트리 기반 항목
라이트, 다크, 시스템 테마 간 전환을 위한 토글 컴포넌트입니다. ThemeProvider와 함께 사용합니다.
여러 언어 간 전환을 위한 토글 컴포넌트입니다. 버튼, 아이콘, 드롭다운 형태를 지원합니다.
스크롤 후 표시되는 플로팅 버튼으로, 페이지 상단으로 부드럽게 스크롤합니다.
커스텀 스크롤바를 가진 스크롤 영역 컴포넌트입니다. 호버 시 스크롤바를 표시하거나 항상 표시할 수 있습니다.
페이지 스크롤 위치를 표시하는 고정 진행률 바입니다. 그라디언트, 단색, 퍼센트 표시를 지원합니다.
스크롤 가능함을 표시하는 애니메이션 인디케이터입니다. 클릭 시 대상 요소나 다음 섹션으로 스크롤합니다.
사용자/어시스턴트/시스템 역할, 감정, 타이핑 표시, 다양한 표시 변형을 지원하는 채팅 메시지 컴포넌트입니다.
다양한 시각적 스타일을 제공하는 커스텀 스크롤바 컴포넌트입니다. 자동 숨김, 부드러운 스크롤, 다양한 크기 옵션을 지원합니다.
심볼 전용 및 워드마크 포함 변형을 지원하는 로고 컴포넌트입니다. 패스 드로잉 애니메이션과 유연한 크기 조정을 제공합니다.
테마 관리를 위한 컨텍스트 프로바이더입니다. 라이트, 다크, 시스템 테마를 지원하며 localStorage에 저장됩니다.
모션 & 비주얼
12 레지스트리 기반 항목
스크롤에 반응하여 패럴렉스 효과를 제공하는 컴포넌트입니다. 다양한 방향과 속도, 추가 효과를 지원합니다.
무한 스크롤 애니메이션을 제공하는 컴포넌트입니다. 로고, 후기, 반복 콘텐츠 표시에 적합합니다.
마우스를 따라다니는 비주얼 효과가 있는 프리미엄 카드 컴포넌트입니다. SaaS 랜딩 페이지, 포트폴리오, 프리미엄 UI에 적합합니다.
애니메이션 그라디언트 효과를 표시하는 배경 컴포넌트입니다. 히어로 섹션과 장식용 배경에 적합합니다.
스크롤에 따른 텍스트 공개 애니메이션 컴포넌트입니다. 단어별, 글자별 공개 모드와 사용자 정의 색상을 지원합니다.
다양한 애니메이션 타입을 제공하는 고급 페이지 전환 컴포넌트입니다. fade, slide, scale, flip 등과 사용자 정의 이징을 지원합니다.
다양한 인디케이터, 화살표, 전환 효과를 제공하는 슬라이드 캐러셀 컴포넌트입니다. 터치 스와이프와 키보드 네비게이션을 지원합니다.
히어로 섹션을 위한 비디오 배경 컴포넌트입니다. 네이티브 HTML5 비디오, YouTube, Vimeo를 지원하며 세련된 오버레이와 페이드 효과를 제공합니다.
마우스 움직임에 따라 3D 틸트 효과를 만드는 카드 컴포넌트입니다. 제품 카드, 이미지 갤러리, 인터랙티브 쇼케이스에 적합합니다.
마우스 커서를 따라다니는 스포트라이트 효과를 표시하는 프리미엄 카드 컴포넌트입니다. 다크 테마 랜딩 페이지에 적합합니다.
스크롤 인디케이터와 스냅을 지원하는 가로 스크롤 컨테이너.
스크롤 또는 인터랙션에 반응하는 리빌 애니메이션 이미지 컴포넌트.
대시보드
24 레지스트리 기반 항목
작업 관리를 위한 드래그앤드롭 칸반 보드 컴포넌트입니다. HTML5 DnD API, WIP 제한, 우선순위 배지 등을 지원합니다.
추세 표시, 강조 색상, 반응형 그리드 레이아웃을 지원하는 통계 패널입니다. 대시보드와 분석 뷰에 적합합니다.
감정 선택 및 분석을 위한 컴포넌트 모음입니다. 다이어리 앱, 정신건강 트래커, 감성 분석 UI에 적합합니다.
제목, 값, 아이콘, 선택적 추세 표시기를 포함한 통계 표시 카드 컴포넌트입니다. 대시보드에 적합합니다.
미니 바 차트를 포함할 수 있는 메트릭 표시 카드 컴포넌트입니다. StatCard와 유사하지만 차트 시각화 기능을 제공합니다.
시각적 진행 바와 함께 진행률을 표시하는 카드 컴포넌트입니다. 목표 달성률, 작업 완료, 또는 값 비교 표시에 적합합니다.
트렌드 데이터를 선 그래프로 표시하는 컴포넌트입니다. 여러 시리즈, 영역 채우기, 다양한 색상 팔레트를 지원합니다.
데이터 시각화를 위한 막대 차트 컴포넌트입니다. 다중 데이터 시리즈와 커스터마이징 옵션을 지원합니다.
대시보드를 위한 소형 막대 차트 컴포넌트입니다. 툴팁, 통계, 오늘 데이터 강조 표시와 함께 데이터를 표시합니다.
빠른 액션을 수행하는 클릭 가능한 카드 컴포넌트입니다. 링크 또는 버튼으로 렌더링되며 다양한 시각적 스타일을 지원합니다.
타임스탬프, 아이콘, 선택적 뱃지가 포함된 활동 내역을 표시하는 컴포넌트입니다.
아바타, 이름, 이메일, 멤버십 등급을 포함한 사용자 프로필 정보를 표시하는 카드 컴포넌트입니다.
멤버십 등급을 표시하기 위한 배지 컴포넌트입니다. basic, pro, premium, admin 등급과 사용자 정의 레이블을 지원합니다.
제목, 값, 부제목, 선택적 액션 버튼이 포함된 요약 정보 표시 카드 컴포넌트입니다.
다양한 타입(info, warning, error, success)과 상대적 타임스탬프가 포함된 알림 표시 카드 컴포넌트입니다.
대시보드 위젯과 카드를 구성하기 위한 반응형 그리드 레이아웃 컴포넌트입니다.
대시보드 레이아웃을 위한 접을 수 있는 사이드바 네비게이션 컴포넌트입니다.
제목, 설명, 날짜 범위 선택, 필터, 액션이 포함된 대시보드 페이지용 툴바 컴포넌트입니다.
상태 배지, 금액 포맷팅, 날짜 포맷팅, 행 클릭 상호작용이 내장된 거래 데이터 표시 테이블 컴포넌트입니다.
메타데이터, 정산 정보, 수수료 내역, 이벤트 로그를 포함한 거래 상세 정보를 표시하는 드로어 컴포넌트입니다.
상태 표시기, 금액, 날짜와 함께 정산 처리 단계를 표시하는 타임라인 컴포넌트입니다.
진행 바와 상태 표시기가 포함된 PG 라우팅 또는 결제수단별 비중을 표시하는 카드 컴포넌트입니다.
건강 상태, 승인률, 거래량 및 선택 상호작용이 포함된 가맹점 목록 컴포넌트입니다.
색상과 툴팁을 커스터마이징할 수 있는 GitHub 스타일 연간 기여 히트맵.
섹션 & 카드
6 레지스트리 기반 항목
단일 또는 슬라이드 모드, 그라디언트/비디오/이미지 배경, 반응형 크기를 지원하는 히어로 섹션입니다.
아이콘, 제목, 설명을 포함한 기능 소개 카드입니다. 그라디언트, 글래스, 네온 스타일을 지원합니다.
아이콘, 제목, 내용을 포함한 정보 카드입니다. 다양한 메시지 유형에 맞는 색상 톤을 지원합니다.
제목, 설명, 액션 슬롯을 포함한 섹션 헤더 컴포넌트입니다.
localStorage 지속성을 가진 북마크 토글 버튼입니다. 여러 항목의 즐겨찾기를 관리합니다.
선택 모드, 일괄 액션, 반응형 레이아웃을 지원하는 범용 액션 툴바입니다. 알림, 로그, 대시보드 관리에 적합합니다.