Features Grid

Overview

The Features Grid component is a responsive grid layout for showcasing product features, services, or any grouped content. It supports icons, titles, descriptions, and various layout options.

Preview

The Features Grid component displaying a responsive layout of feature cards with icons and descriptions.

Quick Start

Here's the simplest way to add a Features Grid to your page:

import { FeaturesGrid } from "@/components/landing/features-grid";

export default function YourPage() {
  // Define your features
  const features = [
    {
      title: "Easy to Use",
      description: "Simple and intuitive interface for everyone.",
      icon: "check",
    },
    {
      title: "Fast Setup",
      description: "Get started in minutes, not hours.",
      icon: "rocket",
    },
  ];

  // Add the Features Grid to your page
  return <FeaturesGrid title="Features" description="What we offer" features={features} />;
}

Basic Usage

Import and use the Features Grid component in your pages:

import { FeaturesGrid } from "@/components/landing/features-grid";

export default function YourPage() {
  const features = [
    {
      title: "Easy Integration",
      description: "Integrate with your existing tools seamlessly.",
      icon: "puzzle",
    },
    {
      title: "Powerful Analytics",
      description: "Get insights into your business performance.",
      icon: "chart",
    },
    // Add more features...
  ];

  return (
    <FeaturesGrid
      title="Why Choose Us"
      description="Discover the features that make us stand out"
      features={features}
    />
  );
}

Props

Required Props

These are the essential props you need to make the Features Grid work:

// The minimum props needed:
<FeaturesGrid
  title="Features"          // The main heading
  description="What we offer" // A short description
  features={[               // Array of features to display
    {
      title: "Feature 1",
      description: "Description 1",
      icon: "check"
    },
    // Add more features...
  ]}
/>

Optional Props

interface FeaturesGridProps {
  className?: string;       // Additional CSS classes
  columns?: 2 | 3 | 4;     // Number of columns (default: 3)
  centered?: boolean;      // Center align content
  withBorder?: boolean;    // Add borders to feature cards
  withBackground?: boolean; // Add background to feature cards
}

Layout Variants

Default Grid (3 Columns)

<FeaturesGrid
  title="Our Features"
  description="Everything you need to succeed"
  features={features}
/>

Two Columns with Borders

<FeaturesGrid
  columns={2}
  withBorder
  title="Key Benefits"
  description="What sets us apart"
  features={features}
/>

Four Columns with Background

<FeaturesGrid
  columns={4}
  withBackground
  centered
  title="Platform Features"
  description="Comprehensive tools for your needs"
  features={features}
/>

Styling

The Features Grid uses Tailwind CSS for styling and can be customized using the className prop:

<FeaturesGrid
  className="bg-gradient-to-b from-orange-500/10 to-transparent"
  title="Custom Styled Features"
  description="Features with custom styling"
  features={features}
  withBackground
  centered
/>

Individual feature items can also be styled:

const features = [
  {
    title: "Premium Feature",
    description: "Special feature with custom styling",
    icon: "star",
    className: "bg-orange-500/5 border-orange-500/20",
  },
  // More features...
];