Feature Card Carousel with Image Crossfade

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature103.tsx instead.

Usage

The file also exports feature103Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature103, feature103Demo } from "@/components/blocks/feature/feature103";

export default function Page() {
  return <Feature103 {...feature103Demo} />;
}

Props

Types

type CarouselFeatureSlide = {
  title: string;
  description: string;
  image: { src: string; alt: string };
};

Behavior notes

• Real client-side state: an activeIndex useState drives which slide is shown; every slide's image is stacked absolutely and crossfades via a CSS opacity transition (opacity-0 to opacity-100 over 700ms) rather than mounting/unmounting images.
• Arrow buttons step the index by -1/+1 and wrap around at both ends (modulo arithmetic); dot buttons jump straight to a given slide.
• Dots use role="tablist"/role="tab"/aria-selected, and each carries an aria-label naming its slide for screen readers.
• "use client" component, so its demo props live in the sibling feature103.demo.tsx file per this repo's client/demo-file-split rule, not in feature103.tsx itself.
• No autoplay: the carousel only advances on explicit arrow or dot interaction.