Prose

@hua-labs/ui

v1.0.0

장문 콘텐츠를 위한 타이포그래피 기본값이 적용된 리치 텍스트 컨테이너.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

Props

이름	타입	기본값	설명
`children`	`React.ReactNode`	-	프로즈 컨테이너 안에 렌더링할 콘텐츠
`as`	`"div" \| "article" \| "section" \| "main" \| "aside" \| "nav" \| "header" \| "footer"`	`"div"`	렌더링할 HTML 요소 타입
`size`	`"sm" \| "base" \| "lg"`	`"base"`	타이포그래피 크기 프리셋
`color`	`"default" \| "gray"`	`"default"`	텍스트 색상 변형
`dot`	`string`	-	스타일링을 위한 dot 유틸리티 문자열
`style`	`React.CSSProperties`	-	추가 인라인 스타일

코드 예시

기본 사용법

import { Prose } from '@hua-labs/ui';
import '@hua-labs/ui/styles/prose.css';

<Prose>
  <h1>Article Title</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <h2>Section Heading</h2>
  <ul>
    <li>First item</li>
    <li>Second item</li>
  </ul>
</Prose>

아티클로 렌더링

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

<Prose as="article" size="lg">
  <h1>Blog Post Title</h1>
  <p>Full article content with larger typography...</p>
  <blockquote>
    An insightful quote from the article.
  </blockquote>
  <pre><code>const example = "code block";</code></pre>
</Prose>

크기 변형

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

// Small prose for sidebars or captions
<Prose size="sm">
  <p>Compact text content for tight layouts.</p>
</Prose>

// Default prose
<Prose>
  <p>Standard reading content.</p>
</Prose>

// Large prose for featured articles
<Prose size="lg">
  <p>Larger, more spacious typography for hero content.</p>
</Prose>

회색 색상 변형

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

<Prose color="gray">
  <p>Muted text content using the gray color variant.</p>
  <p>Good for secondary or supporting content.</p>
</Prose>

Section Form