패키지 목록
@hua-labs/ui
v1.1.0-alpha.1
Components
Tailwind
Tailwind CSS 기반의 모던 React UI 컴포넌트 라이브러리. 다크 모드, 접근성, 커스터마이징 지원.
$npm install @hua-labs/ui
컴포넌트 카테고리
기본 컴포넌트
@hua-labs/uiButton
버튼 컴포넌트
Card
카드 컴포넌트
Badge
배지 컴포넌트
Input
입력 컴포넌트
Modal
모달 컴포넌트
Skeleton
스켈레톤 로딩
ThemeProvider
테마 프로바이더
IconProvider
아이콘 프로바이더
폼 컴포넌트
@hua-labs/ui/formForm
폼 래퍼
FormField
폼 필드
Select
선택 컴포넌트
Checkbox
체크박스
Radio
라디오 버튼
Switch
스위치
네비게이션
@hua-labs/ui/navigationTabs
탭 컴포넌트
Breadcrumb
브레드크럼
Pagination
페이지네이션
피드백
@hua-labs/ui/feedbackToast
토스트 알림
Alert
알럿 컴포넌트
Progress
프로그레스 바
Spinner
로딩 스피너
고급 컴포넌트
@hua-labs/ui/advancedScrollProgress
스크롤 진행률 표시
ScrollToTop
맨 위로 버튼
LanguageToggle
언어 전환 토글
EmotionAnalysis
감정 분석 UI
CodeBlock
코드 블록 (구문 강조)
대시보드
@hua-labs/ui/advanced/dashboardStatCard
통계 카드
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/sdui | Server-Driven UI |
특징
🎨 Tailwind CSS 기반
Tailwind CSS v4와 완벽 호환. 유틸리티 클래스로 쉽게 커스터마이징.
🌙 다크 모드
시스템 설정 자동 감지, 수동 토글 지원.
♿ 접근성
WCAG 2.1 기준 준수. 키보드 네비게이션 지원.
📦 트리 쉐이킹
사용하는 컴포넌트만 번들에 포함. 최적화된 빌드.