Skip to content
패키지 목록

@hua-labs/ui

v1.1.0-alpha.1
Components
Tailwind

Tailwind CSS 기반의 모던 React UI 컴포넌트 라이브러리. 다크 모드, 접근성, 커스터마이징 지원.

$npm install @hua-labs/ui

컴포넌트 카테고리

기본 컴포넌트

@hua-labs/ui

Button

버튼 컴포넌트

Card

카드 컴포넌트

Badge

배지 컴포넌트

Input

입력 컴포넌트

Modal

모달 컴포넌트

Skeleton

스켈레톤 로딩

ThemeProvider

테마 프로바이더

IconProvider

아이콘 프로바이더

폼 컴포넌트

@hua-labs/ui/form

Form

폼 래퍼

FormField

폼 필드

Select

선택 컴포넌트

Checkbox

체크박스

Radio

라디오 버튼

Switch

스위치

네비게이션

@hua-labs/ui/navigation

Tabs

탭 컴포넌트

Breadcrumb

브레드크럼

Pagination

페이지네이션

피드백

@hua-labs/ui/feedback

Toast

토스트 알림

Alert

알럿 컴포넌트

Progress

프로그레스 바

Spinner

로딩 스피너

고급 컴포넌트

@hua-labs/ui/advanced

ScrollProgress

스크롤 진행률 표시

ScrollToTop

맨 위로 버튼

LanguageToggle

언어 전환 토글

EmotionAnalysis

감정 분석 UI

CodeBlock

코드 블록 (구문 강조)

대시보드

@hua-labs/ui/advanced/dashboard

StatCard

통계 카드

Chart

차트 컴포넌트

DataTable

데이터 테이블

빠른 시작

1. 기본 사용법

tsx
import { Button, Card, Badge, Input } from '@hua-labs/ui';

function MyComponent() {
  return (
    <Card className="p-6">
      <Badge>New</Badge>
      <h2>Welcome</h2>
      <Input placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

2. 테마 설정

tsx
import { ThemeProvider } from '@hua-labs/ui';

function App({ children }) {
  return (
    <ThemeProvider defaultTheme="system" enableSystem enableTransition>
      {children}
    </ThemeProvider>
  );
}

3. 고급 컴포넌트 사용

tsx
import { ScrollProgress, ScrollToTop } from '@hua-labs/ui/advanced';
import { CodeBlock } from '@hua-labs/ui';

function DocsPage() {
  return (
    <>
      <ScrollProgress height={3} color="gradient" position="top" />

      <CodeBlock
        code="const hello = 'world';"
        language="javascript"
      />

      <ScrollToTop variant="secondary" />
    </>
  );
}

Exports

Import Path설명
@hua-labs/ui기본 컴포넌트
@hua-labs/ui/advanced고급 컴포넌트
@hua-labs/ui/advanced/dashboard대시보드 컴포넌트
@hua-labs/ui/form폼 컴포넌트
@hua-labs/ui/navigation네비게이션 컴포넌트
@hua-labs/ui/feedback피드백 컴포넌트
@hua-labs/ui/sduiServer-Driven UI

특징

🎨 Tailwind CSS 기반

Tailwind CSS v4와 완벽 호환. 유틸리티 클래스로 쉽게 커스터마이징.

🌙 다크 모드

시스템 설정 자동 감지, 수동 토글 지원.

♿ 접근성

WCAG 2.1 기준 준수. 키보드 네비게이션 지원.

📦 트리 쉐이킹

사용하는 컴포넌트만 번들에 포함. 최적화된 빌드.