Annotation Node

A node for adding descriptions, tutorials, visual notes and custom annotations.

Dependencies:

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui.reactflow.dev/annotation-node


pnpm dlx shadcn@latest add https://ui.reactflow.dev/annotation-node


yarn dlx shadcn@latest add https://ui.reactflow.dev/annotation-node


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

Usage

1. Copy the component into your app


import { ArrowDownRight } from "lucide-react";
 
import {
  AnnotationNode,
  AnnotationNodeContent,
  AnnotationNodeIcon,
  AnnotationNodeNumber,
} from "@/components/annotation-node";
 
const AnnotationNodeDemo = () => {
  return (
    <AnnotationNode>
      <AnnotationNodeNumber>1.</AnnotationNodeNumber>
      <AnnotationNodeContent>
        Annotate your flows any way you'd like.
      </AnnotationNodeContent>
      <AnnotationNodeIcon className="bottom-0 right-2">
        <ArrowDownRight />
      </AnnotationNodeIcon>
    </AnnotationNode>
  );
};
 
export default AnnotationNodeDemo;

2. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
 
import AnnotationNode from "./component-example";
 
const nodeTypes = {
  annotationNode: AnnotationNode,
};
 
const defaultNodes = [
  {
    id: "1a",
    type: "input",
    data: { label: "Node 1" },
    position: { x: 0, y: 0 },
  },
  {
    id: "1b",
    position: { x: -150, y: -55 },
    parentId: "1a",
    data: { label: "Annotation 1" },
    type: "annotationNode",
  },
];
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow nodeTypes={nodeTypes} defaultNodes={defaultNodes} fitView>
        <Background />
      </ReactFlow>
    </div>
  );
}