Box

@hua-labs/ui

v1.0.0

dot 스타일링을 지원하는 레이아웃 프리미티브 컴포넌트.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Box } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Props

이름	타입	기본값	설명
`as`	`"div" \| "section" \| "article" \| "aside" \| "main" \| "nav" \| "header" \| "footer" \| "figure" \| "figcaption" \| "details" \| "summary" \| "fieldset" \| "form" \| "ol" \| "ul" \| "li"`	`"div"`	렌더링할 HTML 요소 타입
`dot`	`string`	-	스타일링을 위한 dot 유틸리티 문자열
`style`	`React.CSSProperties`	-	추가 인라인 스타일

코드 예시

기본 사용법

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

<Box dot="p.4 bg.gray-100 rounded.lg">
  <p>Content inside a dot-styled box</p>
</Box>

시맨틱 HTML

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

<Box as="article" dot="p.6 bg.white shadow.md">
  <h2>Article Title</h2>
  <p>Article content...</p>
</Box>

<Box as="aside" dot="p.4 bg.gray-50">
  <p>Sidebar content</p>
</Box>

Icon Text