Theming

React Flow has been built with deep customization in mind. Many of our users fully transform the look and feel of React Flow to match their own brand or design system. This guide will introduce you to the different ways you can customize React Flow's appearance.

Default styles

React Flow's default styles are enough to get going with the built-in nodes. They provide some sensible defaults for styles like padding, border radius, and animated edges. You can see what they look like below:

You'll typically load these default styles by importing them in you App.jsx file or other entry point:

import 'reactflow/dist/style.css';

Without dipping into custom nodes and edges, there are three ways you can style React Flow's basic look:

• Passing inline styles through style props
• Overriding the built-in classes with custom CSS
• Overriding the CSS variables React Flow uses

Customizing with style props

The easiest way to start customising the look and feel of your flows is to use the style prop found on many of React Flow's components to inline your own CSS.

import ReactFlow from 'reactflow'
 
const styles = {
  background: 'red',
  width: '100%',
  height: 300,
};
 
export default function Flow() {
  return <ReactFlow style={styles} nodes={[...]} edges={[...]} />
}

Overriding built-in classes

Some consider heavy use of inline styles to be an anti-pattern. In that case, you can override the built-in classes that React Flow uses with your own CSS. There are many classes attached to all sorts of elements in React Flow, but the ones you'll likely want to override are listed below:

Third-party solutions

You can choose to opt-out of React Flow's default styling altogether and use a third-party styling solution instead. If you want to do this, you must make sure you still import the base styles.

import 'reactflow/dist/base.css';

Styled Components

Many of the components you render directly, such as the <MiniMap />, accept both className and style props. This means you can use any styling solution you like, such as Styled Components (opens in a new tab):

import { MiniMap } from 'reactflow';
 
const StyledMiniMap = styled(MiniMap)`
  background-color: ${(props) => props.theme.bg};
 
  .react-flow__minimap-mask {
    fill: ${(props) => props.theme.minimapMaskBg};
  }
 
  .react-flow__minimap-node {
    fill: ${(props) => props.theme.nodeBg};
    stroke: none;
  }
`;

For a complete example of using Styled Components with React Flow, check out the example!

TailwindCSS

Custom nodes and edges are just React components, and you can use any styling solution you'd like to style them. For example, you might want to use Tailwind (opens in a new tab) to style your nodes:

function CustomNode({ data }) {
  return (
    <div className="px-4 py-2 shadow-md rounded-md bg-white border-2 border-stone-400">
      <div className="flex">
        <div className="rounded-full w-12 h-12 flex justify-center items-center bg-gray-100">
          {data.emoji}
        </div>
        <div className="ml-2">
          <div className="text-lg font-bold">{data.name}</div>
          <div className="text-gray-500">{data.job}</div>
        </div>
      </div>
 
      <Handle
        type="target"
        position={Position.Top}
        className="w-16 !bg-teal-500"
      />
      <Handle
        type="source"
        position={Position.Bottom}
        className="w-16 !bg-teal-500"
      />
    </div>
  );
}

import 'reactflow/dist/style.css';
import 'tailwind.css';

For a complete example of using Tailwind with React Flow, check out the example!