Embla Carousel

Lightweight carousel library with great touch support

carousel

Tiny bundle size with smooth scrolling and extensible plugins.

ReactCarouselTouchLightweight

🎮 Playground

import useEmblaCarousel from "embla-carousel-react"

export default function Demo() {
  const [emblaRef] = useEmblaCarousel()
  
  return (
    <div ref={emblaRef}>
      <div className="flex">
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
      </div>
    </div>
  )
}

Open Sandbox

Use cases

•Image galleries
•Product carousels
•Testimonials

Good for

✓Performance-critical apps
✓Mobile-first designs
✓Custom carousels

Not good for

✗Complex multi-row grids
✗Non-scroll based animations

Installation

$ npm install embla-carousel-react

Example

import useEmblaCarousel from "embla-carousel-react"

export default function Demo() {
  const [emblaRef] = useEmblaCarousel()
  
  return (
    <div ref={emblaRef}>
      <div className="flex">
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
      </div>
    </div>
  )
}

Comparison

"Lighter than Swiper, more modern than react-slick."

Trust Metrics

6.2K

GitHub Stars

820K

Weekly Downloads

Last Commit:last year

Used by

shadcn/uiCal.comVercel

View on GitHub View on npm