HeroSlider
A full-page hero section with image slider, text overlay, and call-to-action buttons.
Loading...
Basic Usage
import { HeroSlider } from "@corew500/ui"
const slides = [
{
image: "/hero1.jpg",
title: "Welcome to Our Platform",
description: "Build something amazing today",
cta: { label: "Get Started", href: "/signup" },
},
{
image: "/hero2.jpg",
title: "Powerful Features",
description: "Everything you need in one place",
cta: { label: "Learn More", href: "/features" },
},
]
<HeroSlider slides={slides} />Auto Play
<HeroSlider slides={slides} autoPlay interval={5000} />Content Position
// Center (default)
<HeroSlider slides={slides} contentPosition="center" />
// Left aligned
<HeroSlider slides={slides} contentPosition="left" />
// Right aligned
<HeroSlider slides={slides} contentPosition="right" />Overlay Intensity
// Light overlay
<HeroSlider slides={slides} overlay="light" />
// Default overlay
<HeroSlider slides={slides} overlay="default" />
// Dark overlay
<HeroSlider slides={slides} overlay="dark" />
// No overlay
<HeroSlider slides={slides} overlay="none" />Custom Height
<HeroSlider slides={slides} height="100vh" />
<HeroSlider slides={slides} height="500px" />With Secondary CTA
const slides = [
{
image: "/hero.jpg",
title: "Welcome",
description: "Get started today",
cta: { label: "Sign Up", href: "/signup" },
secondaryCta: { label: "Learn More", href: "/about" },
},
]
<HeroSlider slides={slides} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| slides* | HeroSlide[] | — | Array of slides to display |
| autoPlay | enum | true | Enable auto-play |
| interval | number | 5000 | Auto-play interval in milliseconds |
| showControls | enum | true | Show navigation controls |
| showIndicators | enum | true | Show indicator dots |
| labels | { previous?: string; next?: string; } | — | Labels for accessibility (i18n support) |
| renderCta | (slide: HeroSlide, isPrimary: boolean) => ReactNode | — | Custom render function for CTA buttons |
| height | enum | screen | — |
| overlay | enum | gradient | — |
| contentPosition | enum | center | — |
HeroSlide Type
interface HeroSlide {
image: string
title: string
description?: string
cta?: {
label: string
href: string
}
secondaryCta?: {
label: string
href: string
}
}Design Tokens
| Token | Description |
|-------|-------------|
| --hero-overlay-opacity | Overlay opacity levels |
| --hero-transition-duration | Slide transition timing |
| --hero-title-size | Title font size |
