Components
Displays its children as scrollable carousel items with a configurable number of visible items. Supports gap control aligned with your product grid, full-width bleed, onScroll/onChange event handlers for syncing with other components, and imperative navigation through instanceRef methods.
npx @21st-dev/cli add reshaped/reshaped-carouselLoading preview...
import { Reshaped, View } from "reshaped/bundle";
import Carousel from "@/components/ui/reshaped-carousel";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ maxWidth: 640, width: "100%", margin: "0 auto", padding: 24 }}>
<Carousel visibleItems={3} gap={8}>
<View backgroundColor="neutral-faded" height={25} />
<View backgroundColor="neutral-faded" height={25} />
<View backgroundColor="neutral-faded" height={25} />
<View backgroundColor="neutral-faded" height={25} />
<View backgroundColor="neutral-faded" height={25} />
<View backgroundColor="neutral-faded" height={25} />
</Carousel>
</div>
</Reshaped>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...