Carousel

A collection of highly interactive carousel components for image galleries, hero sections, and fluid presentations.

Four independent components live on this page — four in carousel.tsx (ImageCarousel, HeroCarousel, CustomCarousel, RadialCarousel) and the FluidGlassSlider, which installs on its own.

Carousels

Radial carousel

RadialCarousel arranges cards in a full 360-degree 3D radial wheel radiating in all four directions around a central hub with smooth drag momentum. The hub at the exact centre is a play/pause button for autoplay (autoPlay sets whether it starts playing), and cards further from the top fade toward the page background so the wheel works in light and dark themes.

Passitems: as { title, category, rating, img }[] — cards radiate in 360 degrees around the center.
stepAngle: controls the rotation angle increment between cards (default is 360 / items.length).

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Carousel

npx shadcn@latest add @algorize-ui/carousel

components/custom/carousel.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Carousel needs only the cn helper and lucide-react, which the installation guide already put in place.

All five carousels (RadialCarousel, FluidGlassSlider, ImageCarousel, HeroCarousel, CustomCarousel) ship together in a single self-contained carousel.tsx file when installing carousel. You can import components directly or pass variant="radial" | "glass" | "image" | "hero" | "thumbnails" into the default Carousel component.

Fluid glass slider

FluidGlassSlider is a liquid glass distortion slider featuring dynamic cursor tracking, glassmorphism overlays, and smooth progress tracking.

PassclassName: to customize container dimensions, borders, and shadows.

Image carousel

ImageCarousel handles arrows, dots, swipe and autoplay for you.

Passimages: as a flat array of URL strings or Next.js StaticImageData objects.
autoPlay: is off by default; on, it advances every autoPlayInterval ms (3000).
showArrows: and showDots are both on by default — set either to false to hide it.

Hero carousel

HeroCarousel overlays copy on a full-bleed image — click any image card to set it as the background.

Passslides: as { img, title, des }[] — des is the supporting line under the title.

Thumbnail rail

CustomCarousel adds a clickable thumbnail strip.

imageButtonPosition"bottom": is the default — the rail sits under the main image.
items: is the slide array this variant reads, rather than images.

Side thumbnails

Move the rail withimageButtonPosition"left": — or "right" — for a gallery-style layout.

Features

Discover the Carousel's powerful features, including touch-swipe support, autoplay functionality, and accessible navigation controls.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Unified Carousel (Default Export)

Prop	Type	Default	Description
`variant`	`"radial" \| "glass" \| "image" \| "hero" \| "thumbnails"`	`"image"`	The layout variant to render.
`images`	`ImgSrc[]`	`[]`	Array of image URLs or StaticImageData objects (for `"image"` variant).
`slides`	`any[]`	`[]`	Array of slide objects (for `"glass"` or `"hero"` variants).
`items`	`any[]`	`[]`	Array of item objects (for `"radial"` or `"thumbnails"` variants).
`className`	`string`	`-`	Custom CSS styling classes for the outer wrapper.

RadialCarousel

Prop	Type	Default	Description
`items`	`RadialCarouselItem[]`	`[]`	Array of cards with `{ title, category, rating, price?, img }` radiating in 360 degrees.
`autoPlay`	`boolean`	`false`	If true, continuously rotates the 3D wheel.
`autoPlayInterval`	`number`	`3500`	Interval (in ms) between auto rotations.
`stepAngle`	`number`	`360 / items.length`	Rotation angle step per card in degrees.
`className`	`string`	`-`	Outer container styling.

FluidGlassSlider

Prop	Type	Default	Description
`slides`	`FluidGlassSlide[]`	`DEFAULT_SLIDES`	Array of glass slides with `{ id, image, title, subtitle }`.
`className`	`string`	`-`	Container dimensions, borders, and shadows.

ImageCarousel

Prop	Type	Default	Description
`images`	`ImgSrc[]`	`[]`	Array of string URLs or Next.js StaticImageData objects.
`autoPlay`	`boolean`	`false`	If true, automatically cycles through images.
`autoPlayInterval`	`number`	`3000`	Time (in ms) before automatically switching slides.
`showArrows`	`boolean`	`true`	Whether to show previous/next navigation buttons.
`showDots`	`boolean`	`true`	Whether to show bottom navigation dot indicators.
`transitionDuration`	`number`	`500`	Transition animation duration in milliseconds.
`imageWidth`	`number`	`1200`	Default image width in pixels.
`imageHeight`	`number`	`540`	Default image height in pixels.

HeroCarousel

Prop	Type	Default	Description
`slides`	`HeroSlide[]`	`[]`	Array of full-bleed hero slides with `{ img, title, des }`.
`autoPlay`	`boolean`	`false`	If true, auto-advances the background hero slides.
`autoPlayInterval`	`number`	`3000`	Time (in ms) before advancing to the next hero slide.

CustomCarousel (Thumbnails)

Prop	Type	Default	Description
`items`	`CustomItem[]`	`[]`	Array of thumbnail slides with `{ img, title, des }`.
`imageButtonPosition`	`"bottom" \| "left" \| "right"`	`"bottom"`	Placement of the thumbnail selector strip.
`autoPlay`	`boolean`	`false`	If true, auto-advances through thumbnail items.
`autoPlayInterval`	`number`	`3000`	Time (in ms) between slide changes.