embla-carousel-react

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

embla-carousel-react

React

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

npm GitHub Docs

Fit

Bundle (gzip)

7.3 kB

18.0 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Most carousel libraries render their own DOM structure, inject global styles, and bundle animations that conflict with your design system. They are hard to integrate into accessible, responsive layouts.

What It Does

Embla Carousel gives you a hook that attaches to your own scroll container. It handles touch/mouse/pointer drag, snapping, autoplay (via plugins), and infinite looping. The rendering is 100% yours — Embla only manages scroll behavior.

Installation

bash

npm install embla-carousel-react

Usage Example

tsx

import useEmblaCarousel from 'embla-carousel-react';

export function Carousel({ slides }: { slides: string[] }) {
  const [emblaRef] = useEmblaCarousel({ loop: true });

  return (
    <div className="overflow-hidden" ref={emblaRef}>
      <div className="flex">
        {slides.map((src, i) => (
          <div key={i} className="flex-[0_0_100%]">
            <img src={src} alt={`Slide ${i + 1}`} />
          </div>
        ))}
      </div>
    </div>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.

input-otpReact

Accessible, unstyled one-time-password input for React — the OTP field used by the shadcn/ui component.