> ## Documentation Index
> Fetch the complete documentation index at: https://svelvet.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Group

> A Group of Nodes represented by a bounding box

## Description

A Group component can be used to wrap a set of a Nodes and limit their movement to within the bounds of the Group. These can be created dynamically using Shift + Meta + Click, but can be specified ahead of time using the Group component.

```jsx App.svelte theme={null}
<script>
  import { Svelvet, Group, Node } from 'svelvet';
</script>

<Svelvet>
    <Group color="lightblue" groupName="my-group" position={{x: 300, y: 400}} width={600} height={200}>
        <Node/>
        <Node/>
    </Group>
</Svelvet>
```

## Props

<ResponseField name="groupName" required type="string | number">
  Identification for the Group.
</ResponseField>

<ResponseField name="width" type="number" required>
  Width of the bounding box relative to a scale of 1.
</ResponseField>

<ResponseField name="height" type="number" required>
  Height of the bounding box relative to a scale of 1.
</ResponseField>

<ResponseField name="position" type="{x: number, y: number}" default="{x: 0, y: 0}">
  The position of the Group.
</ResponseField>

<ResponseField name="color" type="CSS Color String" default="random color">
  The color of the group box.
</ResponseField>