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

Default styles

Svelte 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/svelte/dist/style.css';

Base styles

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

import '@xyflow/svelte/dist/base.css';


There are different ways how you can customize the appearance of Svelte Flow:

  • Work with scoped CSS within your custom nodes and edges
  • Override the built-in classes with custom CSS
  • Override the CSS variables Svelte Flow uses
  • Pass inline styles through style props

Working with built-in classes

If you want to override the default styles, you can do so by overriding the built-in CSS classes. You can find a list of all the classes used by Svelte Flow below:

Class nameDescription
.svelte-flowThe outermost container
.svelte-flow__rendererThe inner container
.svelte-flow__zoompaneZoom & pan pane
.svelte-flow__selectionpaneSelection pane
.svelte-flow__selectionUser selection
.svelte-flow__edgesThe element containing all edges in the flow
.svelte-flow__edgeApplied to each Edge in the flow
.svelte-flow__edge.selectedAdded to an Edge when selected
.svelte-flow__edge.animatedAdded to an Edge when its animated prop is true
.svelte-flow__edge-pathThe SVG <path /> element of an Edge
.svelte-flow__edge-labelThe edge label
.svelte-flow__connectionApplied to the current connection line
.svelte-flow__connection-pathThe SVG <path /> of a connection line
.svelte-flow__nodesThe element containing all nodes in the flow
.svelte-flow__nodeApplied to each Node in the flow
.svelte-flow__node.selectedAdded to a Node when selected.
.svelte-flow__node-defaultAdded when Node type is "default"
.svelte-flow__node-inputAdded when Node type is "input"
.svelte-flow__node-outputAdded when Node type is "output"
.svelte-flow__node-groupAdded when Node type is "group"
.svelte-flow__nodesselectionNodes selection
.svelte-flow__nodesselection-rectNodes selection rect
.svelte-flow__handleApplied to each <Handle /> component
.svelte-flow__handle-topApplied when a handle's Position is set to "top"
.svelte-flow__handle-rightApplied when a handle's Position is set to "right"
.svelte-flow__handle-bottomApplied when a handle's Position is set to "bottom"
.svelte-flow__handle-leftApplied when a handle's Position is set to "left"
.svelte-flow__handle.connectingApplied when a connection line is above a handle.
.svelte-flow__handle.validApplied when a connection line is above a handle and the connection is valid
.svelte-flow__backgroundApplied to the <Background /> component
.svelte-flow__minimapApplied to the <MiniMap /> component
.svelte-flow__controlsApplied to the <Controls /> component

Be careful if you go poking around the source code looking for other classes to override. Some classes are used internally and are required in order for the library to be functional. If you replace them you may end up with unexpected bugs or errors!

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.

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:

Variable nameDefault
--attribution-background-color-defaultrgba(255, 255, 255, 0.5)
--node-border-default1px solid #1a192b
--node-group-background-color-defaultrgba(240, 240, 240, 0.25)
--node-boxshadow-hover-default0 1px 4px 1px rgba(0, 0, 0, 0.08)
--node-boxshadow-selected-default0 0 0 0.5px #1a192b
--selection-background-color-defaultrgba(0, 89, 220, 0.08)
--selection-border-default1px dotted rgba(0, 89, 220, 0.8)
--controls-box-shadow-default0 0 2px 1px rgba(0, 0, 0, 0.08)

These variables are used to define the defaults for the various elements of Svelte Flow. This means they can still be overriden by inline styles or custom classes on a per-element basis.



Custom nodes and edges are just Svelte 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:

<script lang="ts">
  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
  type $$Props = NodeProps;
  export let data: $$Props['data'];
<div class="px-4 py-2 shadow-md rounded-md bg-white border-2 border-stone-400">
  <div class="flex">
    <div class="rounded-full w-12 h-12 flex justify-center items-center bg-gray-100">
    <div class="ml-2">
      <div class="text-lg font-bold">{data.name}</div>
      <div class="text-gray-500">{data.job}</div>
    class="w-16 !bg-teal-500 rounded-none border-none"
    class="w-16 !bg-teal-500 rounded-none border-none"

If you want to overwrite default styles, make sure to import Tailwinds entry point after Svelte Flows base styles.

import '@xyflow/svelte/dist/style.css';
import 'tailwind.css';

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