Getting Started with React

Scrollable and draggable carousels in your React or Next.js app in seconds.

Installation

Add the blossom-carousel package to your project.

npm install @blossom-carousel/react

Then, add the component to your React app.

import { BlossomCarousel } from '@blossom-carousel/react';
import '@blossom-carousel/react/style.css';

function App() {
  return <BlossomCarousel>{/* slides */}</BlossomCarousel>;
}

Usage

<BlossomCarousel>
  {Array.from({ length: 12 }, (_, i) => (
    <div>{i}</div>
  ))}
</BlossomCarousel>

as

Define the HTMLElement of the carousel root.

<BlossomCarousel as="ul">
  {Array.from({ length: 12 }, (_, i) => (
    <li>{i}</li>
  ))}
</BlossomCarousel>

Renders as

<ul>
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  ...
</ul>