Theming

Vue Flow comes with minimal default styles and was designed to be fully customizable. Many of our users fully transform the look and feel of Vue Flow to match their own brand or design system. This guide will introduce you to the different ways you can customize Vue Flow’s appearance.

Default styles

Vue 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:

import '@xyflow/vue/style.css';

You’ll typically load these default styles by importing them in your main.ts, App.vue, or another entry point.

Without dipping into custom nodes and edges, there are several ways you can style Vue Flow’s basic look:

• Passing inline styles through style props
• Overriding the built-in classes with custom CSS
• Overriding the CSS variables Vue Flow uses
• Using scoped styles in your Vue components for custom nodes and edges

Base styles

If you just want to load the very basic styles that are necessary for Vue Flow to work, you can import the base styles instead:

import '@xyflow/vue/base.css';

Customization

Built in dark and light mode

By default, Vue Flow follows the user’s operating-system color scheme. To force a specific mode, use the forceColorMode prop with 'light' or 'dark'.

<script setup lang="ts">
import { VueFlow } from '@xyflow/vue';
import '@xyflow/vue/style.css';
</script>
 
<template>
  <VueFlow force-color-mode="dark" :nodes="[]" :edges="[]" />
</template>

Vue Flow adds the color mode as a class on the root element (.vue-flow) that you can use to style your flow based on the color mode:

.vue-flow.dark .vue-flow__node {
  background: #777;
  color: white;
}
 
.vue-flow.light .vue-flow__node {
  background: white;
  color: #111;
}

Customizing with style props

The easiest way to start customizing the look and feel of your flows is to use the style prop on <VueFlow /> and other components to inline your own CSS.

<script setup lang="ts">
import { VueFlow } from '@xyflow/vue';
import '@xyflow/vue/style.css';
 
const styles = {
  background: 'red',
  width: '100%',
  height: '300px',
};
</script>
 
<template>
  <VueFlow :style="styles" :nodes="[]" :edges="[]" />
</template>

CSS variables

If you don’t want to replace the default styles entirely but just want to tweak the overall look and feel, you can override some of the CSS variables we use throughout the library. For an example of how to use these CSS variables, check out our Feature Overview example.

These variables are mostly self-explanatory. Below is a table of all the variables you might want to tweak and their default values for reference:

These variables are used to define the defaults for the various elements of Vue Flow. This means they can still be overridden by inline styles or custom classes on a per-element basis. If you want to override a variable, you can do so by adding:

.vue-flow {
  --xy-node-background-color-default: #ff5050;
}

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 Vue Flow uses with your own CSS. There are many classes attached to all sorts of elements in Vue Flow, but the ones you’ll likely want to override are listed below:

Scoped styles for custom nodes and edges

Custom nodes and edges are Vue components. You can use <style scoped> in those components to keep styling isolated from the rest of your app.

Third-party solutions

You can choose to opt out of Vue 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 (@xyflow/vue/base.css).

TailwindCSS

Custom nodes and edges are just Vue components, and you can use any styling solution you’d like to style them. For example, you might want to use Tailwind  to style your nodes:

<script setup lang="ts">
import type { NodeProps } from '@xyflow/vue';
import { Handle, Position } from '@xyflow/vue';
 
defineProps<NodeProps>();
</script>
 
<template>
  <div class="bg-background rounded-md border-2 border-stone-400 px-4 py-2 shadow-md">
    <div class="flex">
      <div class="bg-card flex h-12 w-12 items-center justify-center rounded-full">
        {{ data.emoji }}
      </div>
      <div class="ml-2">
        <div class="text-lg font-bold">{{ data.name }}</div>
        <div class="text-gray-500">{{ data.job }}</div>
      </div>
    </div>
    <Handle type="target" :position="Position.Top" class="w-16 rounded-none border-none bg-teal-500" />
    <Handle type="source" :position="Position.Bottom" class="w-16 rounded-none border-none bg-teal-500" />
  </div>
</template>

@import '@xyflow/vue/style.css' layer(base);
@import 'tailwindcss';