HeroSection

@hua-labs/ui

v1.2.0

단일 또는 슬라이드 모드, 그라디언트/비디오/이미지 배경, 반응형 크기를 지원하는 히어로 섹션입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

Pro

라이브 데모

HUA UI더 빠르게, 더 아름답게

현대적인 React 컴포넌트 라이브러리로 놀라운 애플리케이션을 구축하세요.

시작하기

크기 옵션

• sm: 400px
• md: 500px
• lg: 600px
• xl: 700px
• full: 100vh (전체 화면)

Props

이름	타입	기본값	설명
`title`	`string`	-	Main title text
`subtitle`	`string`	-	Subtitle text
`description`	`string`	-	Description paragraph
`primaryAction`	`{ label, href, icon? }`	-	Primary CTA button
`secondaryAction`	`{ label, href, icon? }`	-	Secondary CTA button
`slides`	`HeroSlide[]`	-	Enable slide mode with multiple slides
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"lg"`	Section height (full = 100vh)
`background`	`"none" \| "gradient" \| "particles" \| "video" \| "image"`	`"gradient"`	Background style
`autoPlay`	`boolean`	`false`	Auto-play slides
`indicator`	`"dots" \| "line" \| "numbers" \| "none"`	`"dots"`	Slide indicator style
`interval`	`number`	`5000`	Auto-play interval in ms
`showControls`	`boolean`	`true`	Show navigation controls
`pauseOnHover`	`boolean`	`true`	Pause auto-play on hover
`customBackground`	`string`	-	Custom background URL (image or video)
`fullBleed`	`boolean`	`false`	Remove horizontal padding

Code Examples

docs:common.basicUsagetsx

1import { HeroSection } from '@hua-labs/ui/data';
2 
3<HeroSection
4  title="Welcome to HUA"
5  subtitle="Build beautiful apps faster"
6  description="A modern React component library"
7  primaryAction={{
8    label: "docs:components.hero-section.accessibility.getStarted",
9    href: "/docs",
10  }}
11  secondaryAction={{
12    label: "docs:components.hero-section.accessibility.github",
13    href: "https://github.com",
14  }}
15/>

docs:components.heroSection.examples.slideModetsx

1<HeroSection
2  slides={[
3    {
4      title: "Slide 1",
5      description: "docs:components.hero-section.props.fullbleed",
6      primaryAction: { label: "Learn More", href: "#" },
7    },
8    {
9      title: "Slide 2",
10      description: "docs:components.hero-section.props.fullbleed",
11      background: "particles",
12    },
13  ]}
14  autoPlay
15  interval={5000}
16  indicator="dots"
17/>

docs:components.heroSection.examples.backgroundOptionstsx

1// 그라디언트 배경
2<HeroSection background="gradient" ... />
3 
4// 이미지 배경
5<HeroSection
6  background="image"
7  customBackground="/hero-bg.jpg"
8  ...
9/>
10 
11// 비디오 배경
12<HeroSection
13  background="video"
14  customBackground="/hero-video.mp4"
15  ...
16/>

접근성

•시맨틱 HTML: <section> 요소 사용
•슬라이드 컨트롤: 이전/다음 버튼에 aria-label 포함

YearlyHeatmap FeatureCard