Mind Map Component for shadcn/ui – mindmapcn

mindmapcn is a React component that adds interactive, theme-aware mind mapping to your shadcn/ui projects.

It wraps Mind Elixir, an open-source JavaScript mind mapping engine, and exposes a fully typed React API that follows the same component conventions as shadcn/ui.

Features

Use Cases

• Build a project planning dashboard where teams map out tasks and dependencies in a visual tree.
• Add a knowledge base section that displays documentation structures as interactive mind maps.
• Create an organizational chart that shows reporting lines with clickable nodes.
• Use it in educational tools to help students visualize concepts and their relationships.

How to Use It

1. Your project needs Tailwind CSS and shadcn/ui configured before installing mindmapcn.

2. Install mindmapcn:

pnpm

pnpm dlx shadcn@latest add https://mindmapcn.vercel.app/mindmaps/mindmap.json

npm / npx

npx shadcn@latest add https://mindmapcn.vercel.app/mindmaps/mindmap.json

Yarn

yarn shadcn@latest add https://mindmapcn.vercel.app/mindmaps/mindmap.json

Bun

bunx -bun shadcn@latest add https://mindmapcn.vercel.app/mindmaps/mindmap.json

3. Import MindMap and MindMapControls from your registry, then drop them into a sized container.

The container needs an explicit height. The overflow-hidden and relative classes keep the controls overlay positioned correctly inside the bounds.

import { MindMap, MindMapControls } from "@/registry/mindmap";
export function MyMindMap() {
  return (
    <div className="h-[500px] w-full border rounded-lg overflow-hidden relative">
      <MindMap>
        <MindMapControls />
      </MindMap>
    </div>
  );
}

4. Pass a MindElixirData object to the data prop to populate the map on mount:

import { MindMap, MindMapControls } from "@/registry/mindmap";
import type { MindElixirData } from "mind-elixir";
const initialData: MindElixirData = {
  nodeData: {
    id: "root",
    topic: "Project Plan",
    children: [
      { id: "1", topic: "Research" },
      { id: "2", topic: "Design" },
      { id: "3", topic: "Development" },
    ],
  },
};
export function ProjectMap() {
  return (
    <div className="h-[600px] w-full border rounded-lg overflow-hidden relative">
      <MindMap
        data={initialData}
        direction={2}
        onChange={(data) => console.log(data)}
      >
        <MindMapControls position="bottom-right" />
      </MindMap>
    </div>
  );
}

5. Use the useMindMap hook inside any component nested within MindMap to reach the underlying Mind Elixir instance directly:

Check isLoaded before calling methods on the instance. The flag turns true once the component has mounted and loaded its initial data.

import { useMindMap } from "@/registry/mindmap";
function MapActions() {
  const { mind, isLoaded } = useMindMap();
  const handleReset = () => {
    if (isLoaded && mind) {
      mind.refresh();
    }
  };
  return <button onClick={handleReset}>Reset View</button>;
}

API Reference

MindMap Props

useMindMap Hook

Call this hook inside any component nested within MindMap:

const { mind, isLoaded } = useMindMap();

MindMapControls Props

Related Resources

• Mind Elixir: The open-source JavaScript mind mapping engine.
• React Flow: A node-based graph and diagram library for React.

FAQs

Q: Does mindmapcn work with the Next.js App Router?
A: Yes. Add the "use client" directive to any file that imports MindMap or useMindMap.

Q: Can I save mind map data to a database?
A: Use the onChange callback on the MindMap component. It fires with the full MindElixirData object after any edit.

Q: How do I export the mind map as an image?
A: Render MindMapControls with showExport set to true. The export button triggers the built-in export flow from Mind Elixir.

Q: What does the component render if I omit the data prop?
A: The component loads with its built-in placeholder data. Pass a MindElixirData object to data when you need the map to reflect your own content on mount.

Q: When should I use MindMapControls instead of the built in toolbar?
A: Use MindMapControls when you want the map actions to match a shadcn style UI.