Feature Grid

Features 155

About

Feature Grid A responsive grid component designed to showcase a list of features or services. Each item in the grid consists of an image, a title, and a description, presented in a clean, card-like format. It's fully responsive, theme-adaptive, and includes a subtle animation on hover to enhance user interaction.

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

Code

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

Usage.tsx

import { FeatureGrid, type Feature } from "@/components/ui/feature-grid";

// Data for the feature grid, mimicking the provided image
const platformFeatures: Feature[] = [
  {
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-OVVSrD4GRutENdVA3QzYLe5KXwBWVq.png&w=320&q=75",
    imageAlt: "Meal programs icon",
    title: "Meal programs",
    description: "Create weekly or monthly meal stipends for your employees, who can then order on Uber Eats. It's easy to set restrictions for time of day, location, and meal budget.",
    href: "#",
  },
  {
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-N7V0aMs36OlOl3QUJEzHT6diM5hJ6Z.png&w=320&q=75",
    imageAlt: "Meal planning icon",
    title: "Meal planning",
    description: "Put in-office meals on autopilot for your whole team. Use the meal planning feature on UberEats.com to schedule recurring group orders and have your employees add their favorite options.",
    href: "#",
  },
  {
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-ptreaSKDFQqhY7oF7Qw6s18YOwh68e.png&w=320&q=75",
    imageAlt: "Gift cards icon",
    title: "Gift cards",
    description: "Show your appreciation for clients and employees with Uber gift cards for rides and meals that will never expire.",
    href: "#",
  },
  {
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-l7sGnL4PG73upUHUi2mGVGegEvkNDs.png&w=320&q=75",
    imageAlt: "Vouchers icon",
    title: "Vouchers",
    description: "Cover the cost of a single meal by sending employees or clients a meal voucher to be redeemed on Uber Eats. You only pay for what is used.",
    href: "#",
  },
];


// The demo component that showcases the FeatureGrid
const FeatureGridDemo = () => {
  return (
    <div className="w-full max-w-6xl mx-auto p-4 md:p-8">
      <div className="mb-10 text-center">
        <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
          One platform gives you the control to provide meals in multiple ways
        </h1>
        <p className="mt-4 max-w-3xl mx-auto text-lg text-muted-foreground">
          Whether you want to give employees a monthly meal stipend or cover the cost of a single meal, our flexible suite of solutions has you covered.
        </p>
      </div>
      
      <FeatureGrid features={platformFeatures} />
    </div>
  );
};

export default FeatureGridDemo;