2025-11-12
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@latestOr 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.
// 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.
-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-nameIf it’s a React Flow UI component:
npx shadcn@latest add https://ui.reactflow.dev/component-name