An interactive feature list where selecting an item reveals its description and crossfades a matching image, useful for product feature sections on landing pages.
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}
/>
);
}