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:

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

This will install mind-elixir and add the MindMap component to your project.

Usage

Import and use the MindMap component:

import { MindMap, MindMapControls } from "@/registry/mindmap";

export function MyMindMap() {
  return (
    <div className="h-[500px] w-full border rounded-lg overflow-hidden relative">
      <MindMap />
    </div>
  );
}
Note: The mind map uses oklch colors for accessibility and theme support. It automatically switches between light and dark themes.
PreviousIntroductionNextUsage