A full-bleed slideshow with a slow Ken Burns zoom, animated captions, arrows, dots, an autoplay progress bar, swipe and keyboard control.
npx shadcn@latest add https://hyperblur.dev/r/slide-show.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/slide-show.tsx.
import { SlideShow } from "@/components/hyperblur/slide-show"
<div className="h-[420px]">
<SlideShow slides={[{ background: <img src="/a.jpg" alt="" />, title: "Northern light" }]} />
</div>| Prop | Type | Default | Description |
|---|---|---|---|
| slides | { background: ReactNode; title?: string; text?: string }[] | Slides with a background and optional caption. Use this or children. | |
| children | ReactNode | Slides as plain children. Each child becomes the background of one slide. | |
| transition | "fade" | "zoom" | "slide" | "zoom" | How slides change. Zoom crossfades and adds a slow Ken Burns push on the background. |
| autoplay | number | 5000 | Milliseconds per slide, shown as a progress bar. 0 turns autoplay off. Pauses on hover and focus, and is off with reduced motion. |
| loop | boolean | true | Wrap around after the last slide and before the first. |
| arrows | boolean | true | Show previous and next buttons. |
| dots | boolean | true | Show the dot indicators. |
| fullscreenButton | boolean | false | Show a button that toggles browser fullscreen. |