React Hero Carousel
The full-bleed dark hero that opens a silicon or industrial homepage: each slide carries a headline, a subtitle, and an outline CTA on a deep surface with a product visual alongside. It auto-advances — the active tab in the bottom bar fills as a progress indicator — and you can drive it manually with the side arrows or the tab bar. It pauses while you hover, and manual navigation resets the timer.
Edge AI
The technology behind the intelligent edge
Design safer, more responsive systems with real-time inference, sensing, motor control, and power management — on a single chip.
Browse applicationsInstallation
Usage
Drop it at the top of a page, full width. Each slide's visual is any node — an
<img>, a graphic, or a live component.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| slides | HeroSlide[] | — | { tab, eyebrow?, title, subtitle?, cta?, visual? } |
| autoplay | boolean | true | Auto-advance with the tab progress bar |
| interval | number | 7000 | Time per slide (ms) |
The tab is the short label in the bottom bar; the active tab's underline fills over interval and then advances. Hovering the hero pauses it.