Feature Grid

Features

About

Feature Grid This component, FeatureGrid, is designed to display a title and a collection of features in a responsive grid layout. It's highly reusable, as all content is passed in via props.

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

// demo.tsx

import React from "react";
import { FeatureGrid } from "@/components/ui/feature-grid"; // Adjust path as needed

// Data for the feature grid, mirroring the content from the image
const platformFeatures = [
  {
    iconSrc: "https://cdn.21st.dev/assets/mirror/18/1806552d5527ee9d7e8da5089d32b713eaba475f0a329a9e59b458cc285c464d.svg",
    iconAlt: "Globe icon",
    title: "Available globally",
    description: "Uber for Business is available in 6,000+ cities across 32 countries, making it easy to scale employee meal solutions to current international offices, or as you grow.",
  },
  {
    iconSrc: "https://cdn.21st.dev/assets/mirror/5b/5b100feb7a465acc6f70cb138121f79a5a8dc1bccaf7b1d02b466836dc062c5a.svg",
    iconAlt: "Computer monitor icon",
    title: "One platform for meals and rides",
    description: "Easily manage employee rides and eats on one intuitive platform and avoid dealing with multiple billing systems, vendor invoices, and more.",
  },
  {
    iconSrc: "https://cdn.21st.dev/assets/mirror/93/93f5cb9b30370bdcdf43673e01bdd80cb3b65749cc955707f8991bc55aa72d1a.svg",
    iconAlt: "Storefront icon",
    title: "Focused on sustainability",
    description: "Whether it's multimodal delivery to cut down on emissions, utensil opt-in to reduce plastic waste, or group orders to improve efficiency, we operate with sustainability in mind.",
  },
  {
    iconSrc: "https://cdn.21st.dev/assets/mirror/c6/c6aab0debc2e3048efc0ebaafa1ab4450dcf41b24de6b729fcf1968b86395f9a.svg",
    iconAlt: "Savings icon",
    title: "More ways to save",
    description: "Set spending limits on meal programs or offer vouchers (you pay only for the amount used). Plus, order by group size to avoid bulk orders. Additionally, sign up for Uber One for added discounts.",
  },
];


const FeatureGridDemo = () => {
  return (
    <div className="w-full bg-background">
        <FeatureGrid
            title={
                <>
                    Why Uber for Business? The proof is in the <span className="text-primary">platform</span>
                </>
            }
            features={platformFeatures}
        />
    </div>
  );
};

export default FeatureGridDemo;