Reshaped Carousel

Buttons

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reshaped Carousel to your project and fits it to your theme.

Code

How Reshaped Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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={4} bleed={4}>
          <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>
  );
}