Embla Carousel

Embla Carousel is a lightweight, dependency-free carousel library built for smooth, fluid motion and precision swiping. With a framework-agnostic design, it supports React, Vue, Svelte, Solid, and more, offering complete control without unnecessary bloat. It has garnered over 7,900 GitHub stars and is actively maintained with strong community support.

carousel

carouselsliderswipetouchlightweight

🎮 Playground

import React, { useCallback, useEffect, useState } from 'react';
import useEmblaCarousel from 'embla-carousel-react';
import './styles.css';

// Sample slide data with gradients
const slides = [
  { id: 1, title: 'Welcome', subtitle: 'Swipe to explore', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
  { id: 2, title: 'Smooth', subtitle: 'Buttery animations', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
  { id: 3, title: 'Responsive', subtitle: 'Works everywhere', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
  { id: 4, title: 'Lightweight', subtitle: 'Only ~3KB gzipped', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
  { id: 5, title: 'Flexible', subtitle: 'Highly customizable', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
];

export default function App() {
  const [emblaRef, emblaApi] = useEmblaCarousel({ 
    loop: true,
    align: 'center',
    skipSnaps: false,
  });
  
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev();
  }, [emblaApi]);

  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext();
  }, [emblaApi]);

  const scrollTo = useCallback((index: number) => {
    if (emblaApi) emblaApi.scrollTo(index);
  }, [emblaApi]);

  const onSelect = useCallback(() => {
    if (!emblaApi) return;
    setSelectedIndex(emblaApi.selectedScrollSnap());
  }, [emblaApi]);

  useEffect(() => {
    if (!emblaApi) return;
    
    setScrollSnaps(emblaApi.scrollSnapList());
    emblaApi.on('select', onSelect);
    onSelect();
    
    return () => {
      emblaApi.off('select', onSelect);
    };
  }, [emblaApi, onSelect]);

  return (
    <div className="app">
      <h1 className="title">Embla Carousel</h1>
      <p className="description">A lightweight carousel library with fluid drag interactions</p>
      
      <div className="embla">
        <div className="embla__viewport" ref={emblaRef}>
          <div className="embla__container">
            {slides.map((slide) => (
              <div className="embla__slide" key={slide.id}>
                <div 
                  className="slide-content"
                  style={{ background: slide.gradient }}
                >
                  <h2>{slide.title}</h2>
                  <p>{slide.subtitle}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        
        <button className="embla__button embla__button--prev" onClick={scrollPrev}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
        </button>
        
        <button className="embla__button embla__button--next" onClick={scrollNext}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </button>
      </div>
      
      <div className="embla__dots">
        {scrollSnaps.map((_, index) => (
          <button
            key={index}
            className={`embla__dot ${index === selectedIndex ? 'embla__dot--selected' : ''}`}
            onClick={() => scrollTo(index)}
          />
        ))}
      </div>
      
      <div className="info-box">
        <span>Slide {selectedIndex + 1} of {slides.length}</span>
        <span className="hint">👆 Drag or use buttons</span>
      </div>
    </div>
  );
}

Loading playground...

Use cases

•Product image galleries and carousels for e-commerce websites
•Project showcases and image sliders for portfolio sites
•Touch gesture-based content navigation in mobile-first web applications
•Article or video slideshows for news and media platforms
•Lightweight carousel solutions for bundle size-sensitive projects

Good for

✓Framework-agnostic design supporting all major frameworks including JavaScript, React, Vue, Svelte, and Solid
✓Zero dependencies with minimal bundle size (very small gzipped footprint)
✓Exceptional user experience with smooth animations and precise touch/swipe control
✓Highly extensible and customizable through plugin system and reactive utilities
✓Full TypeScript support with active community and sponsor-backed stable maintenance

Not good for

✗Requires more initial setup and custom code compared to all-in-one carousel solutions
✗Advanced features (autoplay, thumbnails, etc.) require separate plugin installation and configuration with a learning curve

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

GitHub Stars

6.8M

Weekly Downloads

Last Commit:Jan 21, 2026

Used by

shadcn/uiCal.comVercel

View on GitHub View on npm