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

# Customize Behavior

## 1. Getting the Arrow Element

To get access to the Arrow Element APIs, you will first need to get the Arrow Element object from the client.

> [tab] React / Next.js
>
> ```jsx theme={null}
> const arrowElement = client.getArrowElement();
> ```

> [tab] Other Frameworks
>
> ```jsx theme={null}
> const arrowElement = Velt.getArrowElement();
> ```

## 2. Set which elements Arrows can be added to

You can use the `allowedElementIds()` property to set an allowed list of elements the `Arrows` feature can be added to.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltArrows allowedElementIds={['ALLOWED_ID_1', 'ALLOWED_ID_2']} />
> ```

> [tab] Other Frameworks
>
> ```jsx theme={null}
> <velt-arrows allowed-element-ids="['ALLOWED_ID_1', 'ALLOWED_ID_2']"></velt-arrows>
> ```

API Methods:

You can use the `arrowElement.allowedElementIds()` method to set an allowed list of elements the `Arrows` feature can be added to.

> [tab] React / Next.js
>
> ```jsx theme={null}
> arrowElement.allowedElementIds(['ALLOWED_ID_1', 'ALLOWED_ID_2']);
> ```

> [tab] Other Frameworks
>
> ```jsx theme={null}
> arrowElement.allowedElementIds(['ALLOWED_ID_1', 'ALLOWED_ID_2']);
> ```

## 3. Dark Mode

Whether dark mode is enabled.

`Default: false`

> [tab] React / Next.js
>
> ```js theme={null}
> <VeltArrows darkMode={true} />
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> <velt-arrows dark-mode="true"></velt-arrows>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.