Reshaped Carousel

Navigation 4

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 * as React from "react";
import { ProgressIndicator, Reshaped, View } from "reshaped/bundle";
import Carousel from "@/components/ui/reshaped-carousel";

function Component() {
  const [index, setIndex] = React.useState(0);
  return (
    <View gap={4} align="center">
      <Carousel
        visibleItems={3}
        onScroll={() => {}}
        onChange={(args) => setIndex(args.index)}
      >
        <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} />
        <View backgroundColor="neutral-faded" height={25} />
        <View backgroundColor="neutral-faded" height={25} />
        <View backgroundColor="neutral-faded" height={25} />
      </Carousel>
      <ProgressIndicator total={7} activeIndex={index} />
    </View>
  );
}

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 640, width: "100%", margin: "0 auto", padding: 24 }}>
        <Component />
      </div>
    </Reshaped>
  );
}