Feature Section

Features

About

Feature Section This component displays a title and a list of features, each with an icon, title, and description. It's designed to be highly reusable for showcasing key benefits or points. It includes a staggered fade-in animation for the feature items to enhance visual appeal.

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

Code

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

Usage.tsx

// demo.tsx

import { FeatureSection, Feature } from '@/components/ui/feature-section';

/**
 * Mock data for the feature section demo.
 * Replace image URLs with your actual asset links.
 */
const whyShopFeatures: Feature[] = [
  {
    iconSrc: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-vB3yCpbqsZG8AszLPHliTtHLMv24hJ.png&w=1000&q=75', // Placeholder image
    title: 'Superfast Delivery',
    description: 'Get your order delivered to your doorstep at the earliest from dark stores near you.',
  },
  {
    iconSrc: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-dAl3njirA4NBVpbQvBuAG6YLwKu9eE.png&w=1000&q=75', // Placeholder image
    title: 'Best Prices & Offers',
    description: 'Best price destination with offers directly from the manufacturers.',
  },
  {
    iconSrc: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-p3OMGbs2h59gaJTcMXxo3CLy7ZVsIZ.png&w=1000&q=75', // Placeholder image
    title: 'Wide Assortment',
    description: 'Choose from 5000+ products across food, personal care, household & other categories.',
  },
];

/**
 * A demo component to showcase the FeatureSection.
 */
const FeatureSectionDemo = () => {
  return (
    <div className="w-full bg-background">
      <FeatureSection title="Why shop from blinkit?" features={whyShopFeatures} />
    </div>
  );
};

export default FeatureSectionDemo;