Skip to content
Docs
문서로 돌아가기

컴포넌트

HUA UI의 모든 컴포넌트를 한눈에 확인하세요.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { Button, Card, DatePicker } from "@hua-labs/hua";
111
컴포넌트
12
카테고리
36
Pro 항목
레지스트리
YAML + 메타데이터

코어

12 레지스트리 기반 항목

레이아웃

8 레지스트리 기반 항목

14 레지스트리 기반 항목

Form

구조화되고 접근성 있는 폼을 만들기 위한 폼 컨테이너 컴포넌트입니다. FormField와 FormGroup을 함께 사용합니다.

Label

필수 필드 표시, 에러 상태, 변형을 지원하는 폼 필드 레이블 컴포넌트입니다.

FormControl

레이블, 설명, 에러 처리를 포함한 폼 필드 래퍼입니다.

Checkbox

레이블, 설명, 다양한 스타일 옵션을 지원하는 체크박스 컴포넌트입니다.

Radio

그룹 내 단일 선택을 위한 라디오 버튼 컴포넌트입니다.

Select

다양한 스타일, 크기, 상태를 지원하는 드롭다운 선택 컴포넌트입니다.

Switch

켜기/끄기 상태를 위한 토글 스위치 컴포넌트입니다.

Slider

단일 값 또는 범위 모드를 지원하는 숫자 값 선택용 슬라이더 컴포넌트입니다.

Textarea

자동 크기 조절과 글자 수 표시 옵션이 있는 멀티라인 텍스트 입력 컴포넌트입니다.

NumberInput

커스텀 증감 버튼과 범위 유효성 검사가 있는 숫자 입력 컴포넌트입니다.

DatePicker

커스텀 포맷과 날짜 범위 제한을 지원하는 캘린더 기반 날짜 선택 컴포넌트입니다.

Autocomplete

필터링, 키보드 탐색, 비동기 검색, 아이콘 커스텀 옵션을 지원하는 자동완성 입력 컴포넌트입니다.

Upload

드래그 앤 드롭을 지원하는 파일 업로드 컴포넌트입니다. 파일 타입 필터링, 용량 제한, 업로드 진행률 표시 등을 지원합니다.

ColorPicker
Pro

Tailwind CSS 프리셋과 커스텀 HSL 피커가 있는 탭 기반 컬러 피커입니다. 외부 의존성이 없습니다.

데이터 표시

3 레지스트리 기반 항목

내비게이션

5 레지스트리 기반 항목

오버레이

6 레지스트리 기반 항목

인터랙티브

7 레지스트리 기반 항목

피드백

4 레지스트리 기반 항목

유틸리티

10 레지스트리 기반 항목

ThemeToggle

라이트, 다크, 시스템 테마 간 전환을 위한 토글 컴포넌트입니다. ThemeProvider와 함께 사용합니다.

LanguageToggle

여러 언어 간 전환을 위한 토글 컴포넌트입니다. 버튼, 아이콘, 드롭다운 형태를 지원합니다.

ScrollToTop

스크롤 후 표시되는 플로팅 버튼으로, 페이지 상단으로 부드럽게 스크롤합니다.

ScrollArea

커스텀 스크롤바를 가진 스크롤 영역 컴포넌트입니다. 호버 시 스크롤바를 표시하거나 항상 표시할 수 있습니다.

ScrollProgress

페이지 스크롤 위치를 표시하는 고정 진행률 바입니다. 그라디언트, 단색, 퍼센트 표시를 지원합니다.

ScrollIndicator

스크롤 가능함을 표시하는 애니메이션 인디케이터입니다. 클릭 시 대상 요소나 다음 섹션으로 스크롤합니다.

ChatMessage

사용자/어시스턴트/시스템 역할, 감정, 타이핑 표시, 다양한 표시 변형을 지원하는 채팅 메시지 컴포넌트입니다.

Scrollbar

다양한 시각적 스타일을 제공하는 커스텀 스크롤바 컴포넌트입니다. 자동 숨김, 부드러운 스크롤, 다양한 크기 옵션을 지원합니다.

Logo

심볼 전용 및 워드마크 포함 변형을 지원하는 로고 컴포넌트입니다. 패스 드로잉 애니메이션과 유연한 크기 조정을 제공합니다.

ThemeProvider

테마 관리를 위한 컨텍스트 프로바이더입니다. 라이트, 다크, 시스템 테마를 지원하며 localStorage에 저장됩니다.

모션 & 비주얼

12 레지스트리 기반 항목

Parallax
Pro

스크롤에 반응하여 패럴렉스 효과를 제공하는 컴포넌트입니다. 다양한 방향과 속도, 추가 효과를 지원합니다.

Marquee
Pro

무한 스크롤 애니메이션을 제공하는 컴포넌트입니다. 로고, 후기, 반복 콘텐츠 표시에 적합합니다.

GlowCard
Pro

마우스를 따라다니는 비주얼 효과가 있는 프리미엄 카드 컴포넌트입니다. SaaS 랜딩 페이지, 포트폴리오, 프리미엄 UI에 적합합니다.

AnimatedGradient
Pro

애니메이션 그라디언트 효과를 표시하는 배경 컴포넌트입니다. 히어로 섹션과 장식용 배경에 적합합니다.

TextReveal
Pro

스크롤에 따른 텍스트 공개 애니메이션 컴포넌트입니다. 단어별, 글자별 공개 모드와 사용자 정의 색상을 지원합니다.

PageTransition
Pro

다양한 애니메이션 타입을 제공하는 고급 페이지 전환 컴포넌트입니다. fade, slide, scale, flip 등과 사용자 정의 이징을 지원합니다.

Carousel
Pro

다양한 인디케이터, 화살표, 전환 효과를 제공하는 슬라이드 캐러셀 컴포넌트입니다. 터치 스와이프와 키보드 네비게이션을 지원합니다.

VideoBackground
Pro

히어로 섹션을 위한 비디오 배경 컴포넌트입니다. 네이티브 HTML5 비디오, YouTube, Vimeo를 지원하며 세련된 오버레이와 페이드 효과를 제공합니다.

TiltCard
Pro

마우스 움직임에 따라 3D 틸트 효과를 만드는 카드 컴포넌트입니다. 제품 카드, 이미지 갤러리, 인터랙티브 쇼케이스에 적합합니다.

SpotlightCard
Pro

마우스 커서를 따라다니는 스포트라이트 효과를 표시하는 프리미엄 카드 컴포넌트입니다. 다크 테마 랜딩 페이지에 적합합니다.

HorizontalScroll

스크롤 인디케이터와 스냅을 지원하는 가로 스크롤 컨테이너.

ImageReveal

스크롤 또는 인터랙션에 반응하는 리빌 애니메이션 이미지 컴포넌트.

대시보드

24 레지스트리 기반 항목

KanbanBoard
Pro

작업 관리를 위한 드래그앤드롭 칸반 보드 컴포넌트입니다. HTML5 DnD API, WIP 제한, 우선순위 배지 등을 지원합니다.

StatsPanel
Pro

추세 표시, 강조 색상, 반응형 그리드 레이아웃을 지원하는 통계 패널입니다. 대시보드와 분석 뷰에 적합합니다.

Emotion
Pro

감정 선택 및 분석을 위한 컴포넌트 모음입니다. 다이어리 앱, 정신건강 트래커, 감성 분석 UI에 적합합니다.

StatCard
Pro

제목, 값, 아이콘, 선택적 추세 표시기를 포함한 통계 표시 카드 컴포넌트입니다. 대시보드에 적합합니다.

MetricCard
Pro

미니 바 차트를 포함할 수 있는 메트릭 표시 카드 컴포넌트입니다. StatCard와 유사하지만 차트 시각화 기능을 제공합니다.

ProgressCard
Pro

시각적 진행 바와 함께 진행률을 표시하는 카드 컴포넌트입니다. 목표 달성률, 작업 완료, 또는 값 비교 표시에 적합합니다.

TrendChart
Pro

트렌드 데이터를 선 그래프로 표시하는 컴포넌트입니다. 여러 시리즈, 영역 채우기, 다양한 색상 팔레트를 지원합니다.

BarChart
Pro

데이터 시각화를 위한 막대 차트 컴포넌트입니다. 다중 데이터 시리즈와 커스터마이징 옵션을 지원합니다.

MiniBarChart
Pro

대시보드를 위한 소형 막대 차트 컴포넌트입니다. 툴팁, 통계, 오늘 데이터 강조 표시와 함께 데이터를 표시합니다.

QuickActionCard
Pro

빠른 액션을 수행하는 클릭 가능한 카드 컴포넌트입니다. 링크 또는 버튼으로 렌더링되며 다양한 시각적 스타일을 지원합니다.

ActivityFeed
Pro

타임스탬프, 아이콘, 선택적 뱃지가 포함된 활동 내역을 표시하는 컴포넌트입니다.

ProfileCard
Pro

아바타, 이름, 이메일, 멤버십 등급을 포함한 사용자 프로필 정보를 표시하는 카드 컴포넌트입니다.

MembershipBadge
Pro

멤버십 등급을 표시하기 위한 배지 컴포넌트입니다. basic, pro, premium, admin 등급과 사용자 정의 레이블을 지원합니다.

SummaryCard
Pro

제목, 값, 부제목, 선택적 액션 버튼이 포함된 요약 정보 표시 카드 컴포넌트입니다.

NotificationCard
Pro

다양한 타입(info, warning, error, success)과 상대적 타임스탬프가 포함된 알림 표시 카드 컴포넌트입니다.

DashboardGrid
Pro

대시보드 위젯과 카드를 구성하기 위한 반응형 그리드 레이아웃 컴포넌트입니다.

DashboardSidebar
Pro

대시보드 레이아웃을 위한 접을 수 있는 사이드바 네비게이션 컴포넌트입니다.

DashboardToolbar
Pro

제목, 설명, 날짜 범위 선택, 필터, 액션이 포함된 대시보드 페이지용 툴바 컴포넌트입니다.

TransactionsTable
Pro

상태 배지, 금액 포맷팅, 날짜 포맷팅, 행 클릭 상호작용이 내장된 거래 데이터 표시 테이블 컴포넌트입니다.

TransactionDetailDrawer
Pro

메타데이터, 정산 정보, 수수료 내역, 이벤트 로그를 포함한 거래 상세 정보를 표시하는 드로어 컴포넌트입니다.

SettlementTimeline
Pro

상태 표시기, 금액, 날짜와 함께 정산 처리 단계를 표시하는 타임라인 컴포넌트입니다.

RoutingBreakdownCard
Pro

진행 바와 상태 표시기가 포함된 PG 라우팅 또는 결제수단별 비중을 표시하는 카드 컴포넌트입니다.

MerchantList
Pro

건강 상태, 승인률, 거래량 및 선택 상호작용이 포함된 가맹점 목록 컴포넌트입니다.

YearlyHeatmap
Pro

색상과 툴팁을 커스터마이징할 수 있는 GitHub 스타일 연간 기여 히트맵.

섹션 & 카드

6 레지스트리 기반 항목