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

감정 분석

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/data';

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를 기반으로 스타일링되어 커스터마이징이 쉽습니다.

다크 모드

모든 컴포넌트가 다크 모드를 지원합니다.

접근성

WAI-ARIA 표준을 준수하여 접근성을 보장합니다.

트리 쉐이킹

사용하는 컴포넌트만 번들에 포함됩니다.