Scroll-snap slider with arrow buttons, dot indicators, keyboard control and optional autoplay.
npx shadcn@latest add https://hyperblur.dev/r/carousel.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/carousel.tsx.
import { Carousel } from "@/components/hyperblur/carousel"
<Carousel autoplay={4000} slidesPerView={1.2}>{slides}</Carousel>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Slides. Each child becomes one slide. |
| autoplay | number | 0 | Milliseconds between slides. 0 turns autoplay off. Pauses on hover, on focus and while the tab is hidden. |
| loop | boolean | true | Jump back to the first slide after the last one, and to the last one before the first. |
| gap | number | 16 | Space between slides in pixels. |
| slidesPerView | number | 1 | How many slides are visible at once. Fractions like 1.2 show a peek of the next slide. |