Blossom Carousel

Blossom Carousel is the first carousel library that builds on native browser scrolling instead of replacing it. It provides a small drag enhancement for pointer devices while maintaining the core interaction model, performance, and accessibility of a real scroll container.

🥇 Native scrolling: Full performance and accessibility. 🚀 Dragging: Custom physics-based dragging for all pointer types. ➡️ Navigation controls: First-class Previous, Next and Dots navigation controls with customizable dot rendering. ✨ No abstraction: Works with all native web API’s. 💡 Configure with CSS: Works with CSS scroll-snap, position sticky and scroll-driven animations and more. 🪶 0kb on touch devices: Blossom only loads when a fine pointer device is detected. 🧱 Framework ready: Components for React, Vue, Svelte and Web Components. 🚧 Experimental cyclical scrolling: Allows the carousel to infinitely loop.

Installation

Agent Skills

Blossom Carousel’s Agent Skills help AI coding assistants give package-specific guidance.

Install the skills Compatible agents (Cursor, Claude Code, etc.) can discover and use skills automatically.

npx skills add https://www.blossom-carousel.com

Examples

Explore ready-to-copy carousel patterns grouped by complexity.

See all examples

Migration Guides