Infinite menu

Galleries 84

About

a great infinite menu with img and text

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

Code

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

Usage.tsx

import { Component } from "@/components/ui/infinite-menu"; // Adjust path if necessary

const DemoOne = () => {
  const items = [
    {
      image: "https://cdn.21st.dev/assets/mirror/28/28af4ea25ff1dcb9910048d33e6c761acbb6f0cf2c4acee08f6a97d75519c12a.jpg",
      link: "https://21st.dev/",
    },
    {
      image: "https://cdn.21st.dev/assets/mirror/32/32265c67bee7ddd03f2546cdd83762c9bacc534fa9bc7b0faa4539202c41b138.jpg",
      link: "https://21st.dev/",

    },
    {
      image: "https://cdn.21st.dev/assets/mirror/c1/c11447c31c5ec5a0be3c82007207bfa51a72d2d29fc102056d920c909b697bb0.jpg",
      link: "https://21st.dev/",

    },
    {
      image: "https://cdn.21st.dev/assets/mirror/03/03bc68fab5b3c417546c88f62cb8308c948e6e75db0c3ee9f4a745c869a1ba69.jpg",
      link: "https://21st.dev/",

    },
  ];

  return (
    <div className="flex w-full h-screen justify-center items-center">
      <div style={{ height: "600px", width: "100%", maxWidth: "800px", position: "relative" }}>
        <Component items={items} />
      </div>
    </div>
  );
};

export { DemoOne };