design-infraReport a problem or share feedback← Catalog
Cylinder Carousel
freebeui/cylinder-carousel
A carousel whose items line the inside of a cylinder, receding into the center and growing toward the edges. Drag, scroll or arrow-key to roll it, with a springy glide and snap. Reduced-motion drops the glide.
$
npx shadcn@latest add @beui/cylinder-carouselnpm deps: clsx, motion, tailwind-merge
- Source
- beUI (free)
- Kind
- component
- Categories
- carousel
- Use as
- drop-in — replaces your component
- Applies to
- carousel
- Motion
- on drag · medium · motion · medium cost
- Tags
- react, tailwind-v4, motion, motion
- Licence
- MIT — Copyright (c) 2026 Saurabh Chauhan; retain the upstream notice when copying source.
- Live demo
- beui.dev
- Docs
- beui.dev
Similar
Compare all 4 →- Coverflow Carouselsmoothui/coverflow-carousel3D coverflow (rotateY + depth + scale per offset) with drag/swipe, arrow keys, optional autoplay and an aria-live slide announcer; drag turns off under reduced motion (the upstream hasReducedMotion flag is wrong — the code uses useReducedMotion). Cards are bg-background with a foreground/10 ring. Prev/next come from @smoothui/smooth-button (auto-installed), which uses SmoothUI's smooth-N grey ramp from tokens.json.
- Three D Carouselcult-ui/three-d-carousel3D carousel component with perspective effects and smooth item transitions
- Exposure Slidersmoothui/exposure-slideriOS-style exposure slider with draggable ticker and progress ring