Stylish Carousel

A cinematic fan-out of images with spring physics. Pass items or use the bundled demos. Built with motion.

Default

Slides fan with rotate + scale. Arrows, dots, click-to-jump, keyboard, and swipe. Spring-tuned motion.

Loading…

Installation

CLI

npx @sonojs/ui@latest add stylish-carousel

Also needsnpm i lucide-react motion

Usage

Demo images install under components/carousels/stylish-carousel/images/. Pass your own items when you replace them.

page.tsx

"use client"

import { StylishCarousel } from "@/components/carousels/stylish-carousel"

export default function Page() {
  return (
    <StylishCarousel
      initialIndex={3}
      showArrows
      showDots
      clickToNavigate
      slideSize="clamp(200px, 40vw, 420px)"
    />
  )
}

Props

Prop	Type	Default	Description
items	StylishCarouselItem[]	bundled images	Slides with `src` and optional `title` / `alt`. Defaults to static imports from `./images/`.
initialIndex	number	0	Starting active slide (0-based).
slideSize	string	clamp(...)	CSS size for each square slide.
rotationDegrees	number	28	Rotate degrees per offset from center.
inactiveScale	number	0.62	Scale of non-active slides.
autoPlay	number	0	Auto-advance interval in ms. `0` disables.
showArrows	boolean	true	Prev / next controls.
showDots	boolean	true	Dot indicators.
clickToNavigate	boolean	true	Click an inactive slide to jump to it.
onIndexChange	(index: number) => void	-	Fires when the active index changes.
className	string	-	Extra classes on the root.