<Background />

Source on GitHub

The <Background /> component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and cross.


<script lang="ts">
  import { SvelteFlow, Background, BackgroundVariant } from '@xyflow/svelte';
 
  let nodes = $state.raw([]);
  let edges = $state.raw([]);
</script>
 
<SvelteFlow bind:nodes bind:edges>
  <Background bgColor="#ccc" variant={BackgroundVariant.Dots} />
</SvelteFlow>

Props

The type for props of <Background /> component is exported as BackgroundProps.

Name	Type	Default
`id`	`string` When multiple backgrounds are present on the page, each one should have a unique id.
`bgColor`	`string` Color of the background
`patternColor`	`string` Color of the pattern
`patternClass`	`string` Class applied to the pattern
`class`	`ClassValue` Class applied to the container
`gap`	`number \| [number, number]` The gap between patterns. Passing in a tuple allows you to control the x and y gap independently.	`20`
`size`	`number` The radius of each dot or the size of each rectangle if `BackgroundVariant.Dots` or `BackgroundVariant.Cross` is used. This defaults to 1 or 6 respectively, or ignored if `BackgroundVariant.Lines` is used.
`lineWidth`	`number` The stroke thickness used when drawing the pattern.	`1`
`variant`	`BackgroundVariant` Variant of the pattern.	`BackgroundVariant.Dots`