React Flow Roadmap Playground

This project is a small Next.js sandbox for exploring React Flow and the new React Flow UI building blocks while staying within the shadcn design system. It renders a construction-electrician apprenticeship roadmap so you can experiment with nodes, custom layouts, and dialogs in a real app shell.

Stack overview

• Next.js / App Router for the runtime and routing
• Bun as the package manager/runtime (scripts in package.json assume Bun)
• @xyflow/react (formerly React Flow) for the graph canvas
• React Flow UI BaseNode components pulled via the shadcn generator
• shadcn/ui (Radix primitives) for the dialog and buttons
• Tailwind CSS via the new tailwindcss v4 pipeline already set up in globals.css

How to run it locally

bun install
bun run dev

Then open http://localhost:3000.

Key implementation steps

1. Install React Flow

   bun add @xyflow/react

2. Fetch the React Flow UI base node

   bun x shadcn@latest add https://ui.reactflow.dev/base-node

   This generates src/components/base-node.tsx with the BaseNode layout pieces you can reuse across nodes.

3. Add shadcn dialog primitives

   bun x shadcn@latest add dialog

   Gives you src/components/ui/dialog.tsx for the Radix-powered modal.

4. Create your custom node

   • Define RoadmapNodeData and wrap the base node parts in src/components/roadmap-node.tsx.
   • Register it in nodeTypes when rendering <ReactFlow>.

5. Wire up state in app/page.tsx

   • Use useNodesState/useEdgesState to manage the graph.
   • Attach onNodeClick to open the shadcn Dialog with the stage’s details.
   • Optionally prefill positions, edges, and any styling you want to try.

6. Style tokens

   • src/app/globals.css holds the blue/orange palette (both light/dark). Tweaks here propagate through shadcn + React Flow UI components.

Useful commands

bun run dev      # start the dev server
bun run build    # build for production
bun run start    # run the production server
bun x tsc --noEmit  # type-check

Feel free to swap in other React Flow UI components (badges, panels, minimap) or try different layouts—the README tracks the minimum steps needed to reproduce this playground from scratch.