Carousel

v1.0.0

Display

A responsive carousel component with touch support, keyboard navigation, auto-play, and multiple variants.

Dependencies

framer-motion

lucide-react

@/lib/utils

Installation

Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/carousel.json

Manual Installation

// 1. Install dependencies
npm install framer-motion lucide-react

// 2. Make sure you have these shadcn components installed:
npx shadcn@latest add button

// 3. Copy the component code to components/ui/carousel.tsx

// 4. Update your tailwind.config.js to include touch-action utilities:
module.exports = {
  theme: {
    extend: {
      animation: {
        'slide-left': 'slideLeft 0.3s ease-in-out',
        'slide-right': 'slideRight 0.3s ease-in-out',
        'fade-in': 'fadeIn 0.3s ease-in-out',
      },
      keyframes: {
        slideLeft: {
          '0%': { transform: 'translateX(100%)' },
          '100%': { transform: 'translateX(0)' },
        },
        slideRight: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(0)' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
      },
    },
  },
}

// 5. Usage example:
import { Carousel, CarouselItem } from "@/components/ui/carousel"

const items = [
  {
    id: '1',
    content: <img src="/image1.jpg" alt="Slide 1" className="w-full h-64 object-cover" />
  },
  {
    id: '2', 
    content: <img src="/image2.jpg" alt="Slide 2" className="w-full h-64 object-cover" />
  }
]

export default function MyCarousel() {
  return (
    <div className="w-full max-w-4xl mx-auto">
      <Carousel
        items={items}
        autoPlay={true}
        autoPlayInterval={5000}
        showArrows={true}
        showDots={true}
        infinite={true}
      />
    </div>
  )
}

Props

Component properties and their types

items

CarouselItem[]

default: []

Array of carousel items to display

className

string

default: ""

Additional CSS classes

autoPlay

boolean

default: false

Enable auto-play functionality

autoPlayInterval

number

default: 3000

Auto-play interval in milliseconds

showArrows

boolean

default: true

Show navigation arrows

showDots

boolean

default: true

Show dot indicators

showPlayPause

boolean

default: false

Show play/pause button

infinite

boolean

default: true

Enable infinite loop

itemsPerView

number

default: 1

Number of items to show per view

gap

number

default: 16

Gap between items in pixels

variant

"default" | "card" | "fade" | "slide"

default: "default"

Carousel variant style

onSlideChange

(index: number) => void

default: undefined

Callback when slide changes

dragEnabled

boolean

default: true

Enable drag/swipe gestures

keyboardEnabled

boolean

default: true

Enable keyboard navigation

Examples

3 different usage examples

Basic Carousel

import { Carousel, CarouselItem } from '@/components/ui/carousel'

const items = [
  {
    id: '1',
    content: (
      <CarouselItem>
        <img src="/placeholder.svg?height=300&width=400" alt="Image 1" className="w-full h-64 object-cover rounded-lg" />
      </CarouselItem>
    )
  },
  {
    id: '2',
    content: (
      <CarouselItem>
        <img src="/placeholder.svg?height=300&width=400" alt="Image 2" className="w-full h-64 object-cover rounded-lg" />
      </CarouselItem>
    )
  },
  {
    id: '3',
    content: (
      <CarouselItem>
        <img src="/placeholder.svg?height=300&width=400" alt="Image 3" className="w-full h-64 object-cover rounded-lg" />
      </CarouselItem>
    )
  }
]

export function BasicCarousel() {
  return (
    <div className="w-full max-w-md mx-auto">
      <Carousel
        items={items}
        showArrows={true}
        showDots={true}
      />
    </div>
  )
}

Registry

View the component registry file

View Registry

Live Preview

Interactive

3 examples available

Slide 1

First carousel item