Skip to content
Docs

@hua-labs/ui
v1.1.0
Pro

bash
npm install @hua-labs/hua
tsx
import { VideoBackground } from "@hua-labs/ui/advanced";

Native Video

MP4, WebM, Ogg

type="native"

YouTube

type="youtube"

Vimeo

type="vimeo"

Solid Overlay

overlay overlayColor="rgba(0,0,0,0.4)"

Gradient Overlay

gradient gradientDirection="bottom"

  • •
  • •
  • •
  • •

  • •
  • •
  • •

src*string-docs:components.videoBackground.props.src
type"native" | "youtube" | "vimeo""native"docs:components.videoBackground.props.type
posterstring-docs:components.videoBackground.props.poster
autoPlaybooleantruedocs:components.videoBackground.props.autoPlay
loopbooleantruedocs:components.videoBackground.props.loop
mutedbooleantruedocs:components.videoBackground.props.muted
controlsbooleanfalsedocs:components.videoBackground.props.controls
objectFit"cover" | "contain" | "fill""cover"docs:components.videoBackground.props.objectFit
overlaybooleantruedocs:components.videoBackground.props.overlay
overlayColorstring"rgba(0, 0, 0, 0.4)"docs:components.videoBackground.props.overlayColor
gradientbooleanfalsedocs:components.videoBackground.props.gradient
gradientDirection"top" | "bottom" | "both""bottom"docs:components.videoBackground.props.gradientDirection
playbackRatenumber1docs:components.videoBackground.props.playbackRate
fadeInbooleantruedocs:components.videoBackground.props.fadeIn

Native Video
import { VideoBackground } from '@hua-labs/ui/advanced';

<VideoBackground
  src="/hero-video.mp4"
  overlay
  gradient
  gradientDirection="bottom"
>
  <HeroContent />
</VideoBackground>
YouTube
<VideoBackground
  type="youtube"
  src="W0LHTWG-UmQ"  // ISS Earth Timelapse
  overlay
  overlayColor="rgba(0, 0, 50, 0.6)"
/>
Vimeo
<VideoBackground
  type="vimeo"
  src="123456789"
  gradient
  gradientDirection="both"
/>

  • •docs:components.videoBackground.accessibility.decorativeContent: docs:components.videoBackground.accessibility.decorativeContentDesc
  • •docs:components.videoBackground.accessibility.contentLayer: docs:components.videoBackground.accessibility.contentLayerDesc
  • •docs:components.videoBackground.accessibility.posterFallback: docs:components.videoBackground.accessibility.posterFallbackDesc
CarouselProTiltCardPro