Skip to content
Docs

HeroSection

@hua-labs/ui
v1.2.0

bash
npm install @hua-labs/hua
tsx
import { HeroSection } from "@hua-labs/hua";
Pro

HUA UI

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

titlestring-Main title text
subtitlestring-Subtitle text
descriptionstring-Description paragraph
primaryAction{ label, href, icon? }-Primary CTA button
secondaryAction{ label, href, icon? }-Secondary CTA button
slidesHeroSlide[]-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
autoPlaybooleanfalseAuto-play slides
indicator"dots" | "line" | "numbers" | "none""dots"Slide indicator style
intervalnumber5000Auto-play interval in ms
showControlsbooleantrueShow navigation controls
pauseOnHoverbooleantruePause auto-play on hover
customBackgroundstring-Custom background URL (image or video)
fullBleedbooleanfalseRemove horizontal padding

Code Examples

docs:common.basicUsagetsx
1import { HeroSection } from '@hua-labs/hua';
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: "Get Started",
9    href: "/docs",
10  }}
11  secondaryAction={{
12    label: "GitHub",
13    href: "https://github.com",
14  }}
15/>
docs:components.heroSection.examples.slideModetsx
1<HeroSection
2  slides={[
3    {
4      title: "Slide 1",
5      description: "First slide content",
6      primaryAction: { label: "Learn More", href: "#" },
7    },
8    {
9      title: "Slide 2",
10      description: "Second slide content",
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/>

  • •docs:components.heroSection.accessibility.semanticHtml: docs:components.heroSection.accessibility.semanticHtmlDesc
  • •docs:components.heroSection.accessibility.slideControls: docs:components.heroSection.accessibility.slideControlsDesc
MerchantListProFeatureCard