GitHub

2025-11-12

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

Software Engineer

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


npm install


pnpm install


yarn install


npx @tailwindcss/upgrade


pnpm dlx @tailwindcss/upgrade


yarn dlx

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>
  );
}


npx shadcn@latest add component-name


pnpm dlx shadcn@latest add component-name


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


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


bun install

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

How to upgrade your project

Step 1: Update dependencies.

Step 2: Run the Tailwind CSS upgrade codemod.

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

Step 4: Update the components

Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro

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

How to upgrade your project

Step 1: Update dependencies.

Step 2: Run the Tailwind CSS upgrade codemod.

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

Step 4: Update the components

Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro

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