React carousel components
Swipeable rails, card decks and infinite marquees, each with keyboard stepping and snap already handled. Install one and the source is yours to change.
Built with the stack you already ship
Carousels and sliders
From a standard accessible carousel to a cylindrical photo rail with inertia. Each ships with pointer, keyboard and touch input already wired.
- CarouselCarouselSwipeable carousels with slide indicators, autoplay, looping, and keyboard navigation for galleries and showcases.
Orbital Image CarouselDrag a cylindrical photo rail with snapped inertia, keyboard stepping, and depth-aware parallax on every face.
Stacked Tinder-Swipe CardsA real deck where the top card flicks off under your thumb and the one underneath physically rises in real time.
Fan Hover Card StackHover a stacked profile deck and watch the cards fan outward in sequence while the active one lifts to the front.
Stack RevealA React 3D card stack built on Framer Motion where the front card drops away, the deck promotes, then it returns.
Scroll StackCards that pin, tilt, and stack into a tidy deck as you scroll, with zero scroll hijacking anywhere in the sequence.
Before After CardDrag the handle to wipe between before and after images with absolutely zero lag.- SliderSliderAn accessible slider built on Base UI, with keyboard and pointer support and a value bubble that reveals on drag.
Continuous and scroll driven motion
Not everything that moves sideways needs arrows. These loop on their own or advance with the scroll position instead of a click.
Infinite MarqueeA seamless, GPU-only logo strip that never stutters or snaps at the loop point.
Perspective MarqueeA 3D tilted image grid with alternating rows scrolling infinitely in both directions.
Apple-Style Sticky ScrollA pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.
Scrubbable Video RevealAn Apple-style image sequence scrubbed frame by frame on canvas, following your hand as you scroll in either direction.
Animated TabsA physical stack of photo cards shuffled to the front by clipped tabs, with a tight image inset and copy in the footer.
How to choose a carousel
Carousels have a bad reputation and most of it is earned. The classic hero carousel that auto rotates through five marketing messages performs badly because people learn to ignore anything that moves on its own, and because only the first slide is ever really seen. That is not an argument against the pattern, it is an argument against using it to hide content that should have been on the page. A carousel works when the items are genuinely equivalent and the visitor is browsing rather than being sold to.
Product images, testimonials, logos and gallery photos all fit that description. A row of feature explanations does not, because those are not equivalent and hiding four of five behind an interaction means most people read one. The test is simple: if you would be unhappy for someone to see only the first item, do not put it in a carousel.
Once you have decided the pattern fits, the interaction model is the next choice. A standard carousel with arrows and dots is the most predictable and the easiest to make accessible, which is why the base Carousel primitive here is built that way. A swipe deck like Stacked Swipe Deck is better on touch and worse with a mouse. A drag rail like Orbital Image Carousel feels the best of the three and asks the most of the user, because nothing on screen says drag me until they try.
Autoplay deserves more thought than it usually gets. If it moves without being asked, it has to pause on hover, pause on focus, and stop permanently once the user interacts, otherwise it will yank a slide away mid read. It also has to respect reduced motion, which for a carousel means not advancing on its own at all. An infinite marquee is the one case where continuous motion is fine, because it is decorative and nobody is trying to read a specific logo.
The accessibility work is the part worth not rebuilding. A carousel needs arrow key stepping, a live region announcing the current slide, focus that never lands on an off screen item, and controls that are real buttons rather than styled divs. Every carousel here handles those, and the off screen focus problem in particular is the one that most hand rolled versions miss, because it only shows up when you tab through the page rather than clicking.
