Skip to main content

Theming

React Flow includes a very minimal default theme and necessary default styles to make everything work as expected. You need to load the styles on your own:

Load Default Styles​

import 'reactflow/dist/style.css';

This is how the default style looks:

Load Base Styles​

This is basically no styling, but mandatory for React Flow to work.

import 'reactflow/dist/base.css';

This is an example of the base styles:

Overwrite Default Styles​

When you are using the default styles there are two ways to style the flow pane and the nodes and edges. You can create your own CSS rules or pass style properties to the components.

Using Class Names​

Since we are rendering DOM nodes you can simply overwrite the styles with your own CSS rules. The React Flow wrapper has the class name react-flow. If you want to change the background for example you can do:

.react-flow {
  background: red;
}

Using Style Prop​

You can also pass css properties via the style prop:

const reactFlowStyle = {
  background: 'red',
  width: '100%',
  height: 300,
};
...
<ReactFlow style={reactFlowStyle} />;

Using Third-Party Libraries​

You can use any library you want for styling your flows. Check out the styled-components or tailwind examples for some inspiration.

React Flow Class Names​

The following class names are used for the different elements that could occur inside a flow:

  • .react-flow - Outer container
  • .react-flow__renderer - Inner container
  • .react-flow__zoompane - Zoom & pan pane
  • .react-flow__selectionpane - Selection pane
  • .react-flow__selection - User selection
  • .react-flow__edges - Edges wrapper
  • .react-flow__edge - Edge element
    • .selected is added when edge is selected
    • .animated is added when edge is animated
  • .react-flow__edge-path - Edge element path
  • .react-flow__edge-text - Edge text
  • .react-flow__edge-textbg - Edge text background
  • .react-flow__connection - Connection line
  • .react-flow__connection-path - Connection line path
  • .react-flow__nodes - Nodes wrapper
  • .react-flow__node - Node element
    • .selected is added when a node is selected
    • -${type} is added (.react-flow__node-default, .react-flow__node-input, .react-flow__node-output)
  • .react-flow__nodesselection - Nodes selection
  • .react-flow__nodesselection-rect - Nodes selection rect
  • .react-flow__handle - Handle component
    • .react-flow__handle-bottom is added when position = 'bottom'
    • .react-flow__handle-top is added when position = 'top'
    • .react-flow__handle-left is added when position = 'left'
    • .react-flow__handle-right is added when position = 'right'
    • .react-flow__handle-connecting is added when connection line is above a handle
    • .react-flow__handle-valid is added when connection line is above a handle and the connection is valid
  • .react-flow__background - Background component
  • .react-flow__minimap - Mini map component
  • .react-flow__controls - Controls component