FeaturesList

A reusable feature showcase section for SaaS landing pages, marketing websites, onboarding flows, and product pages.

Displays features using an alternating content/image layout with smooth scroll animations, responsive mobile layouts, and optional section headings.

Import the component using:

import FeaturesList from "@/components/ui/featuresList";

Preview

Features

Alternating desktop layouts
Responsive mobile layouts
Scroll-triggered animations
Animated section header
Hover image zoom effects
Lucide icon support
Next.js image optimization
Optional badge support
Customizable content ordering
Fully responsive

Usage

import { BarChart3, ShieldCheck, Zap, Sparkles } from "lucide-react";
 
<FeaturesList
  badge={{
    title: "Features",
    icon:  Sparkles
  }}
  heading="Everything you need to grow"
  subheading="Powerful tools designed to help your business scale faster."
  features={[
    {
      id: "analytics",
      title: "Advanced Analytics",
      description: "Track performance with real-time insights and reports.",
      icon: BarChart3,
      image: "/images/analytics.png",
    },
    {
      id: "security",
      title: "Enterprise Security",
      description: "Protect your data with industry-leading security.",
      icon: ShieldCheck,
      image: "/images/security.png",
    },
    {
      id: "automation",
      title: "Workflow Automation",
      description: "Automate repetitive tasks and save valuable time.",
      icon: Zap,
      image: "/images/automation.png",
    },
  ]}
/>

Props

interface FeatureItem {
  id: string;
  title: string;
  description: string;
  icon: LucideIcon;
  image: string;
}
 
interface FeaturesListProps {
  features: FeatureItem[];
 
  startingPosition?: "left" | "right";
 
  badge?: {
    title: string;
    icon?: LucideIcon;
  };
 
  heading?: string;
 
  subheading?: string;
 
  mobileView?: "column" | "column-image-first";
 
  className?: string;
}

Feature Item Structure

{
  id: "analytics",
  title: "Advanced Analytics",
  description: "Track performance with real-time insights and reports.",
  icon: BarChart3,
  image: "/images/analytics.png"
}

Starting Position

Controls which side the first feature begins on desktop.

Left (Default)

<FeaturesList
  startingPosition="left"
  features={features}
/>

Desktop Layout:

Feature 1 → Content | Image
Feature 2 → Image   | Content
Feature 3 → Content | Image

Right

<FeaturesList
  startingPosition="right"
  features={features}
/>

Desktop Layout:

Feature 1 → Image   | Content
Feature 2 → Content | Image
Feature 3 → Image   | Content

Mobile View

Content First

<FeaturesList
  mobileView="column"
  features={features}
/>

Mobile Layout:

Content
Image

Image First

<FeaturesList
  mobileView="column-image-first"
  features={features}
/>

Mobile Layout:

Image
Content

Badge Example

import { Sparkles } from "lucide-react";
 
<FeaturesList
  badge={{
    title: "Why Choose Us",
    icon: Sparkles,
  }}
  features={features}
/>

With Heading & Description

<FeaturesList
  heading="Built for Modern Teams"
  subheading="Everything your team needs to collaborate, automate, and scale."
  features={features}
/>

Example Data

import { BarChart3, ShieldCheck, Zap } from "lucide-react";
 
const features = [
  {
    id: "analytics",
    title: "Advanced Analytics",
    description: "Track performance with real-time insights and reports.",
    icon: BarChart3,
    image: "/images/analytics.png",
  },
  {
    id: "security",
    title: "Enterprise Security",
    description: "Protect your data with industry-leading security.",
    icon: ShieldCheck,
    image: "/images/security.png",
  },
  {
    id: "automation",
    title: "Workflow Automation",
    description: "Automate repetitive tasks and save valuable time.",
    icon: Zap,
    image: "/images/automation.png",
  },
];

Common Use Cases

SaaS Landing Pages
Product Feature Sections
Startup Websites
Mobile App Showcases
Onboarding Pages
Documentation Homepages
Marketing Websites
Product Comparison Pages