A swipeable carousel with a rolling two-digit page counter, a progress hairline and arrow buttons that disable at both ends.
npx shadcn@latest add https://hyperblur.dev/r/carousel-page-count.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/carousel-page-count.tsx.
import { CarouselPageCount } from "@/components/hyperblur/carousel-page-count"
<CarouselPageCount slides={[{ title: "Morning ferry", caption: "Cold light" }, { title: "Salt flats" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| slides | { title: string; caption?: string; src?: string; from?: string; to?: string }[] | Slides to show. Without a src a gradient from `from` to `to` is used. Eight slides are used when omitted. | |
| value | number | Controlled zero-based slide index. Pair with onChange. | |
| defaultValue | number | 0 | Initial slide index when uncontrolled. |
| onChange | (index: number) => void | Called when the slide changes by arrow, key or swipe. | |
| autoPlay | number | 0 | Milliseconds between automatic advances. 0 turns it off. Pauses on hover and focus and rewinds after the last slide. |
| ratio | string | "16 / 9" | CSS aspect ratio of the slide area. |
| accent | string | "#2f7bff" | Progress bar and focus ring color. |