Node Search

A search bar component that can be used to search for nodes in the flow.

It uses the Command component from shadcn ui .

By default, it will check for lowercase string inclusion in the node’s label, and select the node and fit the view to the node when it is selected. You can override this behavior by passing a custom onSearch function. You can also override the default onSelectNode function to customize the behavior when a node is selected.

Dependencies:

@xyflow/react cmdk shadcn/ui/command

Installation

Make sure to follow the prerequisites before installing the component.


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


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


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


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

Usage

1. Connect the component with your React Flow application.


import { NodeSearch } from "@/registry/components/node-search/";
import { Background, Node, Panel, ReactFlow } from "@xyflow/react";
 
type NodeData = {
  label: string;
};
 
const graphSize = 20;
 
const initNodes: Node<NodeData>[] = Array.from(
  { length: graphSize },
  (_, index) => {
    // Calculate grid dimensions (aim for roughly square grid)
    const cols = Math.ceil(Math.sqrt(graphSize));
    const rows = Math.ceil(graphSize / cols);
 
    // Calculate position in grid
    const col = index % cols;
    const row = Math.floor(index / cols);
 
    // Grid spacing
    const spacing = 200;
    const startX = 100;
    const startY = 100;
 
    return {
      id: `node-${index}`,
      data: { label: `Node ${index}` },
      position: {
        x: startX + col * spacing,
        y: startY + row * spacing,
      },
    };
  },
);
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={initNodes} defaultEdges={[]} fitView>
        <Background />
        <Panel
          className="flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground"
          position="top-left"
        >
          <NodeSearch />
        </Panel>
      </ReactFlow>
    </div>
  );
}