Animated React Carousel Components
Ways to move a row of content past the viewer. A 3D cover flow you can drag or scroll, a cylinder and an arc that curve the row, a wheel that blurs everything but the frame in focus, a gallery that stretches the hovered frame, a parallax marquee, a velocity-driven marquee, and a logo wall that cycles cell by cell.
11 components · Browse all components
Components
Logo Wall
Marquee
Image Wheel
Image Flow Carousel
Arc Marquee
Parallax Carousel
Bend Carousel
Elastic Carousel
Focus Scale Carousel
Cover Flow
Lens Carousel
FAQ
- Do the carousels support touch, keyboard and reduced motion?
- Drag and swipe on touch, arrow keys on the carousels that have a focused frame (Cover Flow, Image Wheel, Focus Scale, Elastic), and every one respects prefers-reduced-motion by removing the non-essential motion.
- How do I install the components in Carousels?
- With the shadcn CLI. Each component page lists its exact command: free components install from a public URL (npx shadcn add https://useplanes.com/r/<name>.json), Pro components install by name (npx shadcn add @useplanes/<name>) after npx @useplanes/cli init --key <key>.
- Do they work with Next.js App Router and Tailwind CSS v4?
- Yes. Every component is a React 19 client component styled with Tailwind CSS v4, and works in Next.js App Router, Vite, or any React app with Tailwind CSS v4.
- Are the components in Carousels free?
- 1 of the 11 are free. The rest need a one-time Planes Pro license, which covers every component and future additions.
- What do they depend on?
- Motion (formerly Framer Motion) is the only runtime animation dependency. The CLI writes the .tsx source into your project, so there is no Planes package to keep updated.