Resizable Node

PreviousNext

A wrapper React Flow node component that adds resizing functionality to other nodes.

Docs
simple-aiui

Preview

Loading preview…
./src/registry/ui/flow/resizable-node.tsx
import { NodeResizer } from "@xyflow/react";
import React from "react";
import { cn } from "@/lib/utils";
import { BaseNode } from "@/registry/ui/flow/base-node";

export const ResizableNode = React.forwardRef<
	HTMLDivElement,
	React.HTMLAttributes<HTMLDivElement> & {
		selected: boolean;
	}
>(({ className, selected, style, children, ...props }, ref) => (
	<BaseNode
		ref={ref}
		style={{
			...style,
			minHeight: 200,
			minWidth: 250,
			maxHeight: 800,
			maxWidth: 800,
		}}
		className={cn(className, "h-full p-0 hover:ring-orange-500")}
		{...props}
	>
		<NodeResizer isVisible={selected} />
		{children}
	</BaseNode>
));
ResizableNode.displayName = "ResizableNode";

Installation

npx shadcn@latest add @simple-ai/resizable-node

Usage

import { ResizableNode } from "@/components/ui/resizable-node"
<ResizableNode />