Carousel

A fully-featured image and content carousel component with navigation arrows, dot indicators, auto-play functionality, responsive design, and accessibility support. Perfect for showcasing images, testimonials, and featured content.

Basic Usage

Slide 1

Slide 2

Slide 3

Slide 4

1 / 4

Auto-play (3 seconds)

Slide 1

Slide 2

Slide 3

Slide 4

1 / 4

Variants

Default

Slide 1

Slide 2

Slide 3

1 / 3

Modern

Slide 1

Slide 2

Slide 3

1 / 3

Elevated

Slide 1

Slide 2

Slide 3

1 / 3

Navigation Styles

Inside Navigation

Slide 1

Slide 2

Slide 3

1 / 3

Outside Navigation

Slide 1

Slide 2

Slide 3

1 / 3

Content Carousel - Testimonials

"This carousel component is exactly what I needed for my project. The API is intuitive and the animations are smooth."

— Sarah Johnson, Frontend Developer

"Great accessibility features and the auto-play functionality works perfectly. Highly recommended!"

— Mike Chen, UX Designer

"The customization options are fantastic. I was able to match it perfectly to our design system."

— Alex Rodriguez, Product Manager

1 / 3

Product Showcase

UIpulse Pro

Professional component library with 200+ premium components and advanced customization options.

$49/moPopular

UIpulse Enterprise

Complete design system solution for large teams with unlimited components and dedicated support.

$199/moEnterprise

UIpulse Custom

Tailored solution designed specifically for your needs with bespoke components and full source code.

CustomBespoke

1 / 3

Without Indicators

Slide 1

Slide 2

Slide 3

Slide 4

1 / 4

Without Navigation

Slide 1

Slide 2

Slide 3

Slide 4

1 / 4

No Loop (Finite)

Slide 1

Slide 2

Slide 3

Slide 4

1 / 4

Carousel Component

tsx

1"use client";
2import React, { useState, useEffect, useRef, useCallback } from "react";
3import { ChevronLeft, ChevronRight } from "lucide-react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { cn } from "@/lib/cn";
6
7const carouselVariants = cva([
8  "relative overflow-hidden rounded-xl",
9  "bg-white dark:bg-neutral-900",
10], {
11  variants: {
12    variant: {
13      default: [
14        "border border-neutral-200 dark:border-neutral-800",
15        "shadow-sm",
16      ],
17      modern: [
18        "border border-neutral-200/40 dark:border-neutral-800/40",
19        "shadow-[0_2px_8px_0px_rgba(0,0,0,0.04)]",
20        "dark:shadow-[0_2px_8px_0px_rgba(0,0,0,0.15)]",