Vibe UI
Initializing Vibe UI System...
Vibe UI

Carousel

A touch-friendly sliding content layout carousel built on top of Embla Carousel.

Carousel

A touch-friendly sliding content layout carousel built on top of Embla Carousel.

Preview

Slide 1
Slide 2
Slide 3

Installation

pnpm dlx vibe-ui-kit@latest add carousel button
💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button

Multi-Card

A responsive multi-card layout displaying 3 items simultaneously, with an interactive switch control to dynamically toggle infinite looping.

Mountain Retreat
Swiss Alps

Mountain Retreat

Neon Streets
Tokyo, Japan

Neon Streets

Ocean Breeze
Maldives

Ocean Breeze

Desert Dunes
Sahara Desert

Desert Dunes

Forest Pathways
Redwood National Park

Forest Pathways

Testimonials

A customer feedback quote slider showcasing client review text, rating stars, and avatar profiles.

"Vibe UI has completely transformed our workflow. The pre-built configurations are robust and save us days of custom code writing."

S

Sarah Jenkins

Lead Designer at Vibe

"The Tailwind integration is extremely clean. It makes customizing standard components trivial while keeping performance top tier."

D

David Chen

Software Architect

"Accessibility and touch gestures are flawless. Embla engine is integrated beautifully under a simple shorthand API interface."

E

Elena Rostova

Product Manager

Vertical

A vertical orientation carousel that slides items vertically instead of horizontally.

Slide 1
Slide 2
Slide 3

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"The scrolling orientation axis of the carousel slides.
loopbooleanfalseIf true, wraps slides infinitely when reaching either end.
dragFreebooleanfalseEnables free momentum scrolling on slides drag.
align"start" | "center" | "end""center"Alignment position anchor of slides relative to the viewport container.
startIndexnumber0Initial active slide index when component mounts.
autoplaybooleanfalseIf true, auto-advances the slideshow loop periodically.
autoplayIntervalnumber4000Time interval in milliseconds between autoplay transitions.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Carousel | Vibe UI