Loop Deck

Infinite loop carousel with card deck style presentation

$ npx @hritik-sharmaa/repeat-ui add carousel-loop-deck

Live preview

Mountain Vista

Nature's Majesty

Breathtaking mountain landscapes that inspire wanderlust

Coastal Beauty

The rhythmic dance of waves against pristine shores

Woodland Serenity

Peaceful trails through ancient woodland sanctuaries

Golden Horizons

Endless golden sands sculpted by desert winds

1 / 4

Customize

Auto Play

Interval3000ms

Accent

Card Width320px

Card Height420px

Spread48px

Tilt8°

Counter

import CarouselLoopDeck from "@/components/repeat-ui/carousel-loop-deck/preview";

<CarouselLoopDeck items={items} />

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add carousel-loop-deck --variant ts-tailwind

The files are in components/repeat-ui/carousel-loop-deck/.

import CarouselLoopDeck from "@/components/repeat-ui/carousel-loop-deck/preview";

export default function Page() {
  return <CarouselLoopDeck />;
}

Prop	Type	Default	Description
`items`	`LoopDeckItem[]`	-	Cards: { id, title, subtitle, image, description }.
`autoPlay`	`boolean`	true	Advance on its own; pauses while hovered.
`autoPlayInterval`	`number`	3000	Milliseconds per card.
`accentColor`	`string`	"#60a5fa"	Ring, subtitle and dot colour.
`cardWidth`	`number`	320	Card width in pixels.
`cardHeight`	`number`	420	Card height in pixels.
`spread`	`number`	48	How far the neighbours fan out, in pixels.
`tilt`	`number`	8	How far the neighbours rotate, in degrees.
`showCounter`	`boolean`	true	Show the 1 / 4 counter.
`className`	`string`	""	Extra classes for the root element.