Apps Grid

Features

About

Lifestyle Apps Grid A responsive and animated grid component to showcase a collection of applications or services, inspired by the Eternal Zomato UI.

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

Code

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

Usage.tsx

import { LifestyleAppsGrid } from '@/components/ui/apps-grid';

// Data for the app cards. This array can be fetched from an API.
const appsData = [
  {
    name: 'zomato',
    description: 'Get the app now to start ordering your favorite dishes!',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/b0/b01ea6c5d523b3cd7a0521f986df98d5a8f931891bbd28609eb72079462b3257.png',
    href: 'https://www.zomato.com',
    bgColor: 'hsl(4, 86%, 96%)', // Light Red
  },
  {
    name: 'blinkit',
    description: 'Choose from 10,000+ products & get them delivered in minutes.',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/45/4565ed85b70e12d3280fd9f9e810c5e59d8dbad20658c4c30e4162d6bf11e207.png',
    href: 'https://www.blinkit.com',
    bgColor: 'hsl(51, 98%, 93%)', // Light Yellow
  },
  {
    name: 'district',
    description: 'The best of events, movies, dining, and everything you love!',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/89/8925f36ad5e428738950f5c255aad400bc4f20be3777db7e943b9aeab9efc670.jpg',
    bgColor: 'hsl(270, 100%, 96%)', // Light Purple
  },
  {
    name: 'hyperpure',
    description: 'Offering complete supply chain solution for your restaurant.',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/aa/aa59ccabb1035edafdf7d6dc9d45ac3b000de52bb1c75cf612d739b544c1e375.png',
    bgColor: 'hsl(3, 86%, 96%)', // Another shade of Light Red/Pink
  },
];

const LifestyleAppsGridDemo = () => {
  return (
    <div className="w-full bg-background">
      <LifestyleAppsGrid apps={appsData} />
    </div>
  );
};

export default LifestyleAppsGridDemo;