Skip to content
HUA Labs
문서

컴포넌트

브랜딩 설정과 잘 연동되는 접근성 좋은 컴포넌트들.

컴포넌트 불러오기

// Import from the main package
import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Container,
  useTranslation,
} from '@hua-labs/hua-ux';

// Import hooks from framework
import { useMotion, useBranding } from '@hua-labs/hua-ux/framework';

Button

다양한 스타일과 크기, 그리고 HUA-UI 시그니처인 springy 호버 효과를 지원하는 버튼이에요.

<Button variant="default" size="lg">
  Click me
</Button>

// With asChild for custom elements (e.g., Link)
<Button asChild>
  <Link href="/about">About</Link>
</Button>

Props

PropTypeDescription
variant'default' | 'secondary' | 'outline' | 'ghost' | 'destructive'Visual style
size'sm' | 'md' | 'lg' | 'xl'Button size
asChildbooleanRender as child element

Card

헤더, 콘텐츠, 푸터로 구성된 유연한 컨테이너 컴포넌트.

Card Title

Card description goes here

This is the card content area where you can put any content.

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    Content goes here
  </CardContent>
</Card>

  • CardHeader - Header section
  • CardTitle - Title text
  • CardDescription - Description text
  • CardContent - Main content area
  • CardFooter - Footer section

Container

페이지 너비를 일정하게 잡아주는 반응형 컨테이너.

<Container>
  <h1>Page content</h1>
  <p>Automatically centered with responsive max-width</p>
</Container>

// With custom className
<Container className="py-24">
  Content with vertical padding
</Container>

기본 최대 너비: 1280px (반응형 패딩 포함)

Icons

hua-ux.config.ts에서 전역 아이콘 설정. HuaUxLayout이 자동 적용해요.

hua-ux.config.ts
import { defineConfig } from '@hua-labs/hua-ux/framework/config';

export default defineConfig({
  preset: 'product',

  // Icon settings - automatically applied by HuaUxLayout
  icons: {
    set: 'phosphor',      // 'phosphor' | 'lucide'
    weight: 'regular',    // Phosphor weight
    size: 20,             // Default size in pixels
  },
});

설정 옵션

OptionTypeDefaultDescription
set'phosphor' | 'lucide''phosphor'Icon library to use
weight'thin' | 'light' | 'regular' | 'bold' | 'duotone' | 'fill''regular'Phosphor icon weight
sizenumber20Default icon size in pixels
colorstring'currentColor'Default icon color
strokeWidthnumber1.25Stroke width for Lucide icons

지원되는 아이콘 세트

Phosphor Icons

6가지 weight 지원. 대부분의 프로젝트에 추천.

@phosphor-icons/react
Lucide Icons

깔끔하고 일관된 아이콘. 미니멀 디자인에 딱.

lucide-react

Icon Context 사용

import { useIconContext } from '@hua-labs/hua-ux';

function MyComponent() {
  const { set, size, weight } = useIconContext();

  return (
    <div>
      <p>Current icon set: {set}</p>
      <p>Size: {size}px</p>
    </div>
  );
}

Hooks

프레임워크 기능을 쓸 수 있는 훅들.

useTranslation

import { useTranslation } from '@hua-labs/hua-ux';

function MyComponent() {
  const { t, currentLanguage } = useTranslation();

  return (
    <div>
      <h1>{t('home:hero.title')}</h1>
      <p>Current: {currentLanguage}</p>
    </div>
  );
}

useBranding

import { useBranding } from '@hua-labs/hua-ux/framework';

function MyComponent() {
  const branding = useBranding();

  return (
    <div style={{ color: branding?.colors?.primary }}>
      Welcome to {branding?.name}
    </div>
  );
}

useLanguageChange

import { useLanguageChange } from '@hua-labs/hua-ux';

function LanguageSwitcher() {
  const { currentLanguage, changeLanguage, supportedLanguages } = useLanguageChange();

  return (
    <select
      value={currentLanguage}
      onChange={(e) => changeLanguage(e.target.value)}
    >
      {supportedLanguages.map((lang) => (
        <option key={lang.code} value={lang.code}>
          {lang.nativeName}
        </option>
      ))}
    </select>
  );
}
시작하기모션