MindMap

Dashboards

About

Beautiful mind map components based on Mind Elixir. One command to install, zero config to start. Styled with Tailwind, works seamlessly with shadcn/ui.

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

Code

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

Usage.tsx

import { MindMap, MindMapControls } from "@/components/ui/mind-map";


const brainstormingData: MindElixirData = {
  nodeData: {
    id: "root",
    topic: "Mobile App Ideas",
    children: [
      {
        id: "productivity",
        topic: "Productivity",
        direction: 0,
        children: [
          { id: "task-manager", topic: "Smart Task Manager", icons: ["📝"] },
          { id: "time-tracker", topic: "Time Tracker", icons: ["⏱️"] },
          { id: "habit", topic: "Habit Builder", icons: ["🎯"] },
        ],
      },
      {
        id: "social",
        topic: "Social",
        direction: 0,
        children: [
          { id: "community", topic: "Community Platform", icons: ["👥"] },
          { id: "events", topic: "Event Finder", icons: ["🎉"] },
        ],
      },
      {
        id: "health",
        topic: "Health & Fitness",
        direction: 1,
        children: [
          { id: "workout", topic: "Workout Planner", icons: ["💪"] },
          { id: "nutrition", topic: "Nutrition Tracker", icons: ["🥗"] },
          { id: "meditation", topic: "Meditation Guide", icons: ["🧘"] },
        ],
      },
      {
        id: "education",
        topic: "Education",
        direction: 1,
        children: [
          { id: "language", topic: "Language Learning", icons: ["🗣️"] },
          { id: "coding", topic: "Coding Tutorials", icons: ["💻"] },
        ],
      },
    ],
  },
};

export default function DemoOne() {


  return (
    <div className="h-screen w-full flex justify-center items-center">
      <MindMap className="w-[500px] h-[500px]" data={brainstormingData}>
        <MindMapControls position="top-right" />
      </MindMap>
    </div>
  );
}