2025-09-30
React Flow UI Components updated to React 19 and Tailwind CSS 4
Our React Flow components have been updated to support the latest version of shadcn/ui , on React 19 and Tailwind CSS 4 !
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 installStep 2: Run the Tailwind CSS upgrade codemod.
Read more about available codemods in the shadcn/ui Tailwind CSS 4 upgrade guide .
npx @tailwindcss/upgradeStep 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";
+}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 is a default shadcn component:
npx shadcn@latest add component-nameIf it is a React Flow component:
npx shadcn@latest add https://ui.reactflow.dev/component-nameGet Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro
Last updated on