Blossom Carousel for React and Next.js

<BlossomCarousel> renders a native horizontal scroll container. Layout, slide sizes, gaps, and snapping are plain CSS. Blossom adds mouse dragging with momentum and rubber-banding, and only downloads its drag engine on devices with a fine pointer. Touch devices keep native scrolling.

For migrations from Embla, Swiper, Splide, Slick, or Flickity, use the blossom-carousel-migration skill first.

Setup

npm install @blossom-carousel/react

Import the stylesheet once from the app entry or root layout (app/layout.tsx for the Next.js App Router, pages/_app.tsx for the Pages Router):

import "@blossom-carousel/react/style.css";

Then use the component wherever the carousel renders. The package doesn't ship a "use client" directive, so in the Next.js App Router, any file that renders Blossom components must start with "use client":