Carousel
Smooth scrolling card carousel with snap points and navigation controls.
Preview
Carousel
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Feature showcases and content browsing sections.
Why this component matters
Carousels let users browse at their own pace, keeping the page compact while offering depth.
Usage guidance
Use for 5-12 items that share a common format. Enable snap scrolling. Show partial next/previous items as a peek affordance.
Installation
bash
npx shadcn@latest add @aceternity/carouselUsage
example.tsxtsx
import { Carousel } from "@/components/ui/carousel";
export default function Example() {
return (
<Carousel>
{/* Your content here */}
</Carousel>
);
}Source
carousel.tsx
components/ui/carousel.tsx