패키지 목록
@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
감정 분석
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/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/sdui | Server-Driven UI |
특징
Tailwind CSS 기반
Tailwind CSS를 기반으로 스타일링되어 커스터마이징이 쉽습니다.
다크 모드
모든 컴포넌트가 다크 모드를 지원합니다.
접근성
WAI-ARIA 표준을 준수하여 접근성을 보장합니다.
트리 쉐이킹
사용하는 컴포넌트만 번들에 포함됩니다.