Installation

How to install and set up mindmapcn in your project.

Prerequisites

A project with Tailwind CSS and shadcn/ui set up.

Installation

Run the following command to add the mind map component:

pnpm dlx shadcn@latest add https://mindmapcn.mind-elixir.com/mindmaps/mindmap.json

This will install mind-elixir (and related dependencies) and add the component to components/ui/mindmap.tsx by default.

Usage

Import from the installed path and wrap the map in a container with an explicit height. The map uses h-full / w-full, so a parent without height will collapse to a blank area.

In the Next.js App Router, mark the file with "use client" — the component uses browser APIs.

"use client";

import { MindMap, MindMapControls } from "@/components/ui/mindmap";
import type { MindElixirData } from "mind-elixir";

const data: MindElixirData = {
  nodeData: {
    id: "root",
    topic: "Mind Map",
    children: [
      { id: "a", topic: "Topic A" },
      { id: "b", topic: "Topic B" },
    ],
  },
};

export function MyMindMap() {
  return (
    // Give the container an explicit height — the map fills 100% of its parent.
    <div className="h-[500px] w-full border rounded-lg overflow-hidden relative">
      <MindMap data={data} readonly>
        <MindMapControls />
      </MindMap>
    </div>
  );
}

Note: The mind map uses oklch colors for accessibility and theme support. It automatically switches between light and dark themes.

PreviousIntroduction NextUsage