> ## 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.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    const arrowElement = client.getArrowElement();
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    const arrowElement = Velt.getArrowElement();
    ```
  </Tab>
</Tabs>

## 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.

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

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

API Methods:

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

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

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    arrowElement.allowedElementIds(['ALLOWED_ID_1', 'ALLOWED_ID_2']);
    ```
  </Tab>
</Tabs>

## 3. Dark Mode

Whether dark mode is enabled.

`Default: false`

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltArrows darkMode={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    <velt-arrows dark-mode="true"></velt-arrows>
    ```
  </Tab>
</Tabs>