Skip to Content
🚨 New Example: Handling Node Collisions!

Timeline

What's new?

We're always working on the React Flow docs and the library.
This is a timeline of the things we've added or changed so far.

xyflow team
✌️

React Flow 12.10.0

Minor Changes

  • #5637  Add zIndexMode to control how z-index is calculated for nodes and edges
  • #5484  Add experimental_useOnNodesChangeMiddleware hook

Patch Changes

Permalink

Alessandro Cheli
Software Engineer

React Flow UI Components updated to React 19 and Tailwind CSS 4

Our React Flow UI components have been updated to support the latest version of shadcn/ui, on React 19 and Tailwind 4!

This update includes a fresh look from the latest version of shadcn/ui , and a new UI Components tutorial to get you started.

How to upgrade your project

To upgrade your project, follow the steps below.

Step 1: Update dependencies.

npm install react@latest react-dom@latest tailwindcss@latest

Or do so manually in package.json, and then run

npm install

Step 2: Run the Tailwind CSS upgrade codemod.

Read more about available codemods in the shadcn/ui Tailwind CSS 4 upgrade guide .

npx @tailwindcss/upgrade

Step 3: Move the React Flow styles to the global.css file.

Important: Tailwind CSS 4 is now configured completely in CSS. Instead of importing your @xyflow/react/dist/style.css file in your App.tsx, you will need to it in your global.css file, after you import tailwindcss.

global.css
// Tailwind CSS 3
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
// Tailwind CSS 4
+@import "tailwindcss";
+@import "tw-animate-css";
+@layer base {
+  @import "@xyflow/react/dist/style.css";
+}

We recommend removing the old js/ts tailwind configuration from your project, and migrating to the new CSS-variable-only configuration. This can make things a lot simpler: you can configure everything related to your application’s design system and look in a single CSS file.

App.tsx
-import '@xyflow/react/dist/style.css';
import "./globals.css";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Step 4: Update the components

For each component you want to update, you can run the following commands.

If it’s a shadcn/ui component:

npx shadcn@latest add component-name

If it’s a React Flow UI component:

npx shadcn@latest add https://ui.reactflow.dev/component-name

Permalink

xyflow team
✌️

React Flow 12.9.0

This update is huge! We added a new EdgeToolbar component, it’s now possible to start a selection above a node and child nodes of different parents won’t overlap anymore:

Minor Changes

  • #5544  Add EdgeToolbar component
  • #5550  Prevent child nodes of different parents from overlapping
  • #5551  Allow to start a selection above a node

Patch Changes

  • #5531  Thanks @Sec-ant ! - Add type property to EdgeProps to match NodeProps behavior
  • #5528  Let NodeResizer props change during ongoing resize
  • #5530  Improve performance of adding nodes & edges
  • #5547  Always call onMoveEnd when onMoveStart was called

Permalink

xyflow team
✌️

React Flow 12.8.5

Patch Changes

  • #5480  Prevent multi-touch events while making a new connection
  • #5482  Make isNodeIntersecting behave the same as getIntersectingNodes
  • #5509  Prevent calling onResizeEnd if node was not resized
  • #5511  Fix regression: elevate edges if connected nodes are selected
  • #5497  Skip eagerly rendering nodes when node dimensions and handles are predefined
  • #5455  Thanks @Sec-ant ! - Fix warning when display is set to none on the wrapper div

Permalink

xyflow team
✌️

React Flow 12.8.4

Patch Changes

  • #5472  Remove dangerouslySetInnerHTML from Node and Edge domAttributes
  • #5459  Fix open arrow marker using fill color from edge instead of none

Permalink

xyflow team
✌️

React Flow 12.8.3

A new version of React Flow is out. With 12.8.3 you get a lot of bug fixes and a great improvement for handles. It’s now possible to position child content of a handle outside of the handle itself and still use it as a starting point for connections as you can see in this example:

Patch Changes

  • #5428  Be able to use detached handle content as a starting point for a connection
  • #5419  Make edge markers fallback to --xy-edge-stroke CSS variable when marker color is null
  • #5453  Snap selection instead of separate nodes when snap grid is enabled
  • #5444  Export MiniMapNode to use it for custom mini map nodes
  • #5415  Allow strings and enums for marker types
  • #5436  Prevent a 0 added to the markup for edges when interactionWidth is 0
  • #5443  Use 1 as the default for interactive Minimap zoom step
  • #5448  Use correct HandleConnection type for Handle onConnect
  • #5420  Omit defaultValue from Node’s domAttributes to fix type incompatibility when using WritableDraft

Permalink

Alessandro Cheli
Software Engineer
Moritz Klack
Co-Founder

Rebrush React Flow UI

We have made some significant improvements to React Flow UI (formerly known as React Flow components). These changes enhance the functionality, visual look and usability of the components, to improive the general developer experience.

Re-organize components

Some components have been moved to examples, while others have been consolidated in a new structure:

  • Nodes Utilities: These components can be used as building blocks for creating custom nodes.
  • Custom Nodes: These are fully functional nodes that can be used directly in your application.
  • Handles: These components are used to create connection points inside nodes.
  • Custom Edges: Fully functional edges that can be used out of the box.
  • Controls: Collection of interactive controls.
  • Miscellaneous: Various utility components that don’t fit into the other categories, like DevTools.

Find all of them in the React Flow UI page.

BaseNode enhancements

Our BaseNode component has been fully revamped, to provide a more consistent experience with shadcn UI , and the rest of our React Flow UI component library.

The new BaseNode component now includes improved styling and wrapper components, aligning to shadcn UI design principles.

Just like a shadcn UI Card component , the BaseNode component now exports

  • BaseNodeHeader and BaseNodeHeaderTitle for the header section,
  • BaseNodeContent for the main content area and
  • BaseNodeFooter for the footer section.

This structure allows for better organization of content within the node, making it easier to create complex node layouts.

Improved examples and nodes

We have also added a few new components and improved existing ones. Our component pages now include more comprehensive examples that showcase the new features and capabilities of the components. For example:

  • New NodeAppendix component, which can be used to add additional information or controls to nodes, like a Node Badge!
  • The AnnotationNode component has been moved to an example usage of BaseNode, to demonstrate how to style the BaseNode.
  • The StatusIndicator now includes a variant with an overlaying spinner, and improved usage examples.
  • The TooltipNode component, has been improved and moved to NodeTooltip. It is no longer a custom node, but rather an utility component that you can use to wrap a custom node with a tooltip.

No more selected prop

You don’t need to pass the selected prop to the BaseNode or its related components anymore. Styling the selected state is now handled automatically by tailwind CSS selectors.

However, selected is still a valid prop for nodes in React Flow, and you can still use it to determine if a node is selected or not in your custom components. If you do not need the selected prop for custom logic, but you only use it for styling, you can safely remove it from your components, and you can follow how BaseNode is implemented to achieve custom styling for your custom selected nodes.

export const BaseNode = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        'relative rounded-md border bg-card text-card-foreground',
        'hover:ring-1',
        // React Flow displays node elements inside of a `NodeWrapper` component,
        // which compiles down to a div with the class `react-flow__node`.
        // When a node is selected, the class `selected` is added to the
        // `react-flow__node` element. This allows us to style the node when it
        // is selected, using Tailwind's `&` selector.
        '[.react-flow\\_\\_node.selected_&]:border-muted-foreground',
        '[.react-flow\\_\\_node.selected_&]:shadow-lg',
        className,
      )}
      tabIndex={0}
      {...props}
    />
  ),
);
BaseNode.displayName = 'BaseNode';

Feedback

We hope these improvements make your experience with React Flow UI even better. If you have any feedback or suggestions, please let us know via mail or Discord !

Permalink

xyflow team
✌️

Learn section rework

Restructured and updated content

We went over and updated our learn section. Here’s what’s changed:

  • We slimmed down most pages and deleted some fluff that we felt didn’t contribute to a better understanding of the library.
  • Quickstart is now the landing page to rule them all, with installation and example setup.
  • Getting started and concepts have been merged into one section.
  • The customization and concepts section have been updated. Our mental approach was to shorten and clearly separate pages by context, making them easy to digest when read both standalone and in succession.
  • In general texts include more interlinking between our docs sections, snippets now include highlights and the layout and headings have been improved for easier scanning of the text.

Reworked code preview

Our code preview component has been updated with a sleek new design with an action bar that allows you to toggle, copy, refresh or open the code in a sandbox. The default size has also been adjusted in some places to integrate into the text better. Here’s what it looks like: