Feature List Showcase

Component 10

About

An interactive feature list where selecting an item reveals its description and crossfades a matching image, useful for product feature sections on landing pages.

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

Code

How Feature List Showcase is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Feature01, type Feature01Props } from "@/components/ui/feature-01";

const values: Feature01Props = {
  variant: "standard",
  animation: "subtle",
  items: [
    {
      id: "1",
      title: "Design",
      description:
        "Clean, accessible components that make your product feel modern and easy to use.",
      media: {
        src: "https://cdn.21st.dev/assets/mirror/72/72baf1d11f337161e880e290ad4348ab0701efa6f039efcdd95d2b1a91a0be9a.jpg",
        alt: "alt image",
      },
    },
    {
      id: "2",
      title: "Components",
      description:
        "Pre-built blocks you can drop into any layout. Customize once, reuse everywhere.",
      media: {
        src: "https://cdn.21st.dev/assets/mirror/5d/5da9ea0a2db6e73a3841df14852cd48b8e3a46cb582c38eb38e086ca74917eb2.jpg",
        alt: "alt image",
      },
    },
    {
      id: "3",
      title: "Developer Experience",
      description:
        "Built with TypeScript, clear APIs, and documentation that gets you shipping faster.",
      media: {
        src: "https://cdn.21st.dev/assets/mirror/8c/8cad1d81dc7bc99ad4bdd6def35fc3fb82eb1f20b11aea2fcf4457ab94752578.jpg",
        alt: "alt image",
      },
    },
    {
      id: "4",
      title: "Customization",
      description:
        "Themes, variants, and overrides. Make it look and behave exactly how you need.",
      media: {
        src: "https://cdn.21st.dev/assets/mirror/7f/7fa8523694bbccd89677412e71d948b637b23ea2f2b1003624165004c558a887.jpg",
        alt: "alt image",
      },
    },
    {
      id: "5",
      title: "Performance",
      description:
        "Optimized for speed and accessibility. Less bundle size, smoother interactions.",
      media: {
        src: "https://cdn.21st.dev/assets/mirror/4a/4a6271a2c937432cb772e50ce1075cb3bd43f0bdec3b828a7c7075d1a27fb6e9.jpg",
        alt: "alt image",
      },
    },
  ],
};

export default function Feature01Demo() {
  return (
    <Feature01
      items={values.items}
      variant={values.variant}
      animation={values.animation}
    />
  );
}