Text

@hua-labs/ui

v1.0.0

시맨틱 HTML 요소와 dot 스타일링을 지원하는 타이포그래피 프리미티브.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

Props

이름	타입	기본값	설명
`as`	`"span" \| "p" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "label" \| "em" \| "strong" \| "small" \| "s" \| "mark" \| "abbr" \| "time" \| "code" \| "pre" \| "blockquote" \| "cite" \| "q"`	`"span"`	렌더링할 HTML 요소 타입
`dot`	`string`	-	스타일링을 위한 dot 유틸리티 문자열
`htmlFor`	`string`	-	label을 폼 컨트롤과 연결 (as='label' 용)
`style`	`React.CSSProperties`	-	추가 인라인 스타일

코드 예시

기본 사용법

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

<Text as="h1" dot="text.3xl font.bold">
  Page Title
</Text>

<Text as="p" dot="text.base text.gray-600">
  Paragraph content with default line-height.
</Text>

타이포그래피 변형

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

<Text as="h1" dot="text.4xl font.bold">Heading 1</Text>
<Text as="h2" dot="text.2xl font.semibold">Heading 2</Text>
<Text as="p" dot="text.lg">Body text</Text>
<Text as="small" dot="text.sm text.gray-500">Caption</Text>
<Text as="code" dot="font.mono bg.gray-100 p.1 rounded.sm">code</Text>

Box Pressable