Cool Slide Gallery

A coverflow-style 3D gallery with configurable tilt, depth, and scale. Pass slides or use the bundled demos. Built with motion.

Default

Cards fan in perspective with tilt and depth. Drag, arrows, dots, titles, badges, and keyboard navigation.

Loading…

Installation

CLI

npx @sonojs/ui@latest add cool-slide-gallery

Also needsnpm i lucide-react motion

Usage

Demo images install under components/carousels/cool-slide-gallery/images/. Pass your own slides when you replace them.

page.tsx

"use client"

import { CoolSlideGallery } from "@/components/carousels/cool-slide-gallery"

export default function Page() {
  return (
    <CoolSlideGallery
      cardWidth={360}
      cardHeight={420}
      showTitle
      showArrows
      showDots
      draggable
      keyboardNavigation
      easing="smooth"
    />
  )
}

Props

Prop	Type	Default	Description
slides	CoolSlideGallerySlide[]	bundled images	Slides with `src` and optional `alt` / `title` / `subtitle` / `badge`. Defaults to static imports from `./images/`.
cardWidth	number	380	Card width in pixels.
cardHeight	number	440	Card height in pixels.
radius	number	5	Border radius scale 0–20.
tilt	number	14	Y-rotation (degrees) on side cards.
sideTilt	number	6	Z-rotation (degrees) lean on side cards.
gap	number	8	Horizontal gap multiplier between cards.
dimOpacity	number	55	Dim intensity 0–100 on inactive cards.
autoplay	boolean	false	Advance automatically while in view.
autoplayDirection	"left-to-right" · "right-to-left"	"right-to-left"	Autoplay step direction.
autoplayDelay	number	2.8	Seconds between autoplay steps.
animationDuration	number	0.6	Transition duration in seconds.
easing	EasingPreset	"smooth"	`smooth` \| `spring` \| `bouncy` \| `snappy`.
showTitle	boolean	true	Title / subtitle overlays.
titlePosition	TitlePosition	"bottom-left"	`bottom-left` \| `bottom-right` \| `top-left` \| `top-right` \| `center` (logical start/end).
showArrows	boolean	true	Prev / next controls.
showDots	boolean	true	Dot indicators.
showCounter	boolean	false	Slide counter text.
showBadge	boolean	true	Badge labels on titles.
clickable	boolean	true	Click side cards to navigate.
draggable	boolean	true	Pointer drag / swipe.
dragThreshold	number	45	Minimum drag distance in px.
keyboardNavigation	boolean	true	Arrow keys to step.
maxVisible	number	2	Side cards visible on each side.
depth	number	230	Z-translate per offset step.
scaleStep	number	0.15	Scale reduction per offset from center.
perspective	number	1500	CSS perspective on the stage.
onSlideChange	(index: number, slide: CoolSlideGallerySlide) => void	-	Fires when the active index changes.
className	string	-	Extra classes on the root.