Base Node
A node wrapper with some basic styling used for creating a shared design among all nodes in your application.
Dependencies:
@xyflow/reactInstallation
Make sure to follow the prerequisites before installing the component.
npx shadcn@latest add https://ui-components-git-tooltip-node-refactor-xyflow.vercel.app/base-nodeUsage
1. Copy the component into your app
"use client";
import {
Background,
Handle,
NodeProps,
Position,
ReactFlow,
Node,
} from "@xyflow/react";
import { BaseNode } from "@/components/base-node";
const defaultNodes = [
{
id: "1",
position: { x: 0, y: 0 },
type: "customNode",
data: {
label: "Custom Node",
},
},
];
const nodeTypes = {
customNode: CustomNode,
};
function CustomNode({ selected, data }: NodeProps<Node<{ label: string }>>) {
return (
<BaseNode selected={selected}>
<>
{data.label}
<Handle type="source" position={Position.Right} />
<Handle type="target" position={Position.Left} />
</>
</BaseNode>
);
}
export default function Demo() {
return (
<div className="h-full w-full">
<ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
<Background />
</ReactFlow>
</div>
);
}2. Connect the component with your React Flow application.
import DemoWrapper from "@/components/demo-wrapper";
import Demo from "@/registry/components/base-node/demo";
export default function DemoPage() {
return (
<DemoWrapper>
<Demo />
</DemoWrapper>
);
}