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

# Notifications Panel Wireframes

> Wireframes for the Notifications Panel.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## Overview

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-overview.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=0db1d885b7efc209f1a65d850876d421" alt="" width="1280" height="650" data-path="images/customization/notification/notification-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe>
            <VeltNotificationsPanelWireframe.Title />
            <VeltNotificationsPanelWireframe.ReadAllButton />
            <VeltNotificationsPanelWireframe.SettingsButton />
            <VeltNotificationsPanelWireframe.Skeleton />
            <VeltNotificationsPanelWireframe.Header />
            <VeltNotificationsPanelWireframe.Content />
            <VeltNotificationsPanelWireframe.Settings />
        </VeltNotificationsPanelWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-wireframe>
            <velt-notifications-panel-title-wireframe></velt-notifications-panel-title-wireframe>
            <velt-notifications-panel-read-all-button-wireframe></velt-notifications-panel-read-all-button-wireframe>
            <velt-notifications-panel-settings-button-wireframe></velt-notifications-panel-settings-button-wireframe>
            <velt-notifications-panel-skeleton-wireframe></velt-notifications-panel-skeleton-wireframe>
            <velt-notifications-panel-header-wireframe></velt-notifications-panel-header-wireframe>
            <velt-notifications-panel-content-wireframe></velt-notifications-panel-content-wireframe>
            <velt-notifications-panel-settings-wireframe></velt-notifications-panel-settings-wireframe>
        </velt-notifications-panel-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Title

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-title.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=5f723bc207c563bdc3ef6c2c754cd011" alt="" width="1280" height="343" data-path="images/customization/notification/notification-title.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Title />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-title-wireframe></velt-notifications-panel-title-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## ReadAllButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-read-all.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=fd0f503846ed7ca21aa988ded59f300c" alt="" width="1280" height="343" data-path="images/customization/notification/notification-read-all.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.ReadAllButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-read-all-button-wireframe></velt-notifications-panel-read-all-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Skeleton

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-skeleton.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=8d5c6b6b89a21c73df6f68b60b845cbe" alt="" width="1280" height="650" data-path="images/customization/notification/notification-skeleton.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Skeleton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-skeleton-wireframe></velt-notifications-panel-skeleton-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Header

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-header.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=3b9311d8d6c5d164f76510a7a11ae4cf" alt="" width="1280" height="350" data-path="images/customization/notification/notification-header.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Header>
            <VeltNotificationsPanelWireframe.Header.TabAll />
            <VeltNotificationsPanelWireframe.Header.TabDocuments />
            <VeltNotificationsPanelWireframe.Header.TabForYou />
            <VeltNotificationsPanelWireframe.Header.TabPeople />
        </VeltNotificationsPanelWireframe.Header>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-header-wireframe>
            <velt-notifications-panel-header-tab-all-wireframe></velt-notifications-panel-header-tab-all-wireframe>
            <velt-notifications-panel-header-tab-documents-wireframe></velt-notifications-panel-header-tab-documents-wireframe>
            <velt-notifications-panel-header-tab-for-you-wireframe></velt-notifications-panel-header-tab-for-you-wireframe>
            <velt-notifications-panel-header-tab-people-wireframe></velt-notifications-panel-header-tab-people-wireframe>
        </velt-notifications-panel-header-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### TabAll

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-header-tab-all.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=bae567185345b1b64c15c4be9b8de1b1" alt="" width="1280" height="350" data-path="images/customization/notification/notification-header-tab-all.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Header.TabAll />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-header-tab-all-wireframe></velt-notifications-panel-header-tab-all-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### TabDocuments

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-header-tab-documents.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=cfcb1a85ef95a9a5e48a9369ad7ca717" alt="" width="1280" height="350" data-path="images/customization/notification/notification-header-tab-documents.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Header.TabDocuments />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-header-tab-documents-wireframe></velt-notifications-panel-header-tab-documents-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### TabForYou

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-header-tab-for-you.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=96247e9949536e563e6a913c2cb1ec2d" alt="" width="1280" height="350" data-path="images/customization/notification/notification-header-tab-for-you.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Header.TabForYou />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-header-tab-for-you-wireframe></velt-notifications-panel-header-tab-for-you-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### TabPeople

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-header-people.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=8e275910ec5a1f91d1385e35baa976f0" alt="" width="1280" height="387" data-path="images/customization/notification/notification-header-people.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Header.TabPeople />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-header-tab-people-wireframe></velt-notifications-panel-header-tab-people-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Content

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=8ee3e48709f0808c7d3b72d8d29fcf5e" alt="" width="1280" height="541" data-path="images/customization/notification/notification-content.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content>
            <VeltNotificationsPanelWireframe.Content.ForYou />
            <VeltNotificationsPanelWireframe.Content.All />
            <VeltNotificationsPanelWireframe.Content.Documents />
            <VeltNotificationsPanelWireframe.Content.People />
        </VeltNotificationsPanelWireframe.Content>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-wireframe>
            <velt-notifications-panel-content-for-you-wireframe></velt-notifications-panel-content-for-you-wireframe>
            <velt-notifications-panel-content-all-wireframe></velt-notifications-panel-content-all-wireframe>
            <velt-notifications-panel-content-documents-wireframe></velt-notifications-panel-content-documents-wireframe>
            <velt-notifications-panel-content-people-wireframe></velt-notifications-panel-content-people-wireframe>
        </velt-notifications-panel-content-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### ForYou

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-for-you.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=b56287d686c4f200041687e23192fccf" alt="" width="1280" height="576" data-path="images/customization/notification/notification-content-for-you.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.ForYou>
            <VeltNotificationsPanelWireframe.Content.List />
            <VeltNotificationsPanelWireframe.Content.LoadMore />
            <VeltNotificationsPanelWireframe.Content.AllReadContainer />
        </VeltNotificationsPanelWireframe.Content.ForYou>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-for-you-wireframe>
            <velt-notifications-panel-content-list-wireframe></velt-notifications-panel-content-list-wireframe>
            <velt-notifications-panel-content-load-more-wireframe></velt-notifications-panel-content-load-more-wireframe>
            <velt-notifications-panel-content-all-read-container-wireframe></velt-notifications-panel-content-all-read-container-wireframe>
        </velt-notifications-panel-content-for-you-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### All

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-all.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=e243eb819598f5bf088633e6694666b2" alt="" width="1280" height="576" data-path="images/customization/notification/notification-content-all.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.All>
            <VeltNotificationsPanelWireframe.Content.All.List />
            <VeltNotificationsPanelWireframe.Content.AllReadContainer />
        </VeltNotificationsPanelWireframe.Content.All>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-all-wireframe>
            <velt-notifications-panel-content-all-list-wireframe></velt-notifications-panel-content-all-list-wireframe>
            <velt-notifications-panel-content-all-read-container-wireframe></velt-notifications-panel-content-all-read-container-wireframe>
        </velt-notifications-panel-content-all-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### All List

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-all-list.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=d3b5fa030f6c93ffb345f86b938a18b3" alt="" width="1280" height="752" data-path="images/customization/notification/notification-content-all-list.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.All.List>
            <VeltNotificationsPanelWireframe.Content.All.List.Item />
        </VeltNotificationsPanelWireframe.Content.All.List>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-all-list-wireframe>
            <velt-notifications-panel-content-all-list-item-wireframe></velt-notifications-panel-content-all-list-item-wireframe>
        </velt-notifications-panel-content-all-list-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### All List Item

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-all-list-item.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=3d481e88ad2a5af4abe5850fb5ffd1d2" alt="" width="1280" height="703" data-path="images/customization/notification/notification-content-all-list-item.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.All.List.Item>
            <VeltNotificationsPanelWireframe.Content.All.List.Item.Label />
            <VeltNotificationsPanelWireframe.Content.All.List.Item.Content />
        </VeltNotificationsPanelWireframe.Content.All.List.Item>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-all-list-item-wireframe>
            <velt-notifications-panel-content-all-list-item-label-wireframe></velt-notifications-panel-content-all-list-item-label-wireframe>
            <velt-notifications-panel-content-all-list-item-content-wireframe></velt-notifications-panel-content-all-list-item-content-wireframe>
        </velt-notifications-panel-content-all-list-item-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### All List Item Label

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-all-list-item-label.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=d363908dcb92f73616631bbb57012771" alt="" width="1280" height="315" data-path="images/customization/notification/notification-content-all-list-item-label.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.All.List.Item.Label />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-all-list-item-label-wireframe></velt-notifications-panel-content-all-list-item-label-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### All List Item Content

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-all-list-item-content.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=351f0a62e4c1c9837c2022103f109c5b" alt="" width="1280" height="703" data-path="images/customization/notification/notification-content-all-list-item-content.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
            <VeltNotificationsPanelWireframe.Content.List />
            <VeltNotificationsPanelWireframe.Content.LoadMore />
        </VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-all-list-item-content-wireframe>
            <velt-notifications-panel-content-list-wireframe></velt-notifications-panel-content-list-wireframe>
            <velt-notifications-panel-content-load-more-wireframe></velt-notifications-panel-content-load-more-wireframe>
        </velt-notifications-panel-content-all-list-item-content-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Documents

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-documents.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=15517336633def73cdf38ddbc7085534" alt="" width="1280" height="576" data-path="images/customization/notification/notification-content-documents.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.Documents>
            <VeltNotificationsPanelWireframe.Content.Documents.List />
            <VeltNotificationsPanelWireframe.Content.AllReadContainer />
        </VeltNotificationsPanelWireframe.Content.Documents>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-documents-wireframe>
            <velt-notifications-panel-content-documents-list-wireframe></velt-notifications-panel-content-documents-list-wireframe>
            <velt-notifications-panel-content-all-read-container-wireframe></velt-notifications-panel-content-all-read-container-wireframe>
        </velt-notifications-panel-content-documents-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Documents List

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-documents-list.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=3d24943a65eac91c5daa7414061da3b0" alt="" width="1280" height="576" data-path="images/customization/notification/notification-content-documents-list.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.Documents.List>
            <VeltNotificationsPanelWireframe.Content.Documents.List.Item />
        </VeltNotificationsPanelWireframe.Content.Documents.List>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-documents-list-wireframe>
            <velt-notifications-panel-content-documents-list-item-wireframe></velt-notifications-panel-content-documents-list-item-wireframe>
        </velt-notifications-panel-content-documents-list-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Documents List Item

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-documents-list-item.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=4480f083dbf0e1ec7f83ccd9d308f5f0" alt="" width="1280" height="548" data-path="images/customization/notification/notification-content-documents-list-item.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.Documents.List.Item>
            <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Unread />
            <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Name />
            <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Count />
            <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content />
        </VeltNotificationsPanelWireframe.Content.Documents.List.Item>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-documents-list-item-wireframe>
            <velt-notifications-panel-content-documents-list-item-unread-wireframe></velt-notifications-panel-content-documents-list-item-unread-wireframe>
            <velt-notifications-panel-content-documents-list-item-name-wireframe></velt-notifications-panel-content-documents-list-item-name-wireframe>
            <velt-notifications-panel-content-documents-list-item-count-wireframe></velt-notifications-panel-content-documents-list-item-count-wireframe>
            <velt-notifications-panel-content-documents-list-item-content-wireframe></velt-notifications-panel-content-documents-list-item-content-wireframe>
        </velt-notifications-panel-content-documents-list-item-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Documents List Item Unread

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-documents-list-item-unread.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=6e193cc9fe46c9533e743468debbc91f" alt="" width="1280" height="297" data-path="images/customization/notification/notification-content-documents-list-item-unread.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Unread />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-documents-list-item-unread-wireframe></velt-notifications-panel-content-documents-list-item-unread-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Documents List Item Name

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-documents-list-item-name.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=83c32ebd5a704b12a30a49b64a8b619a" alt="" width="1280" height="297" data-path="images/customization/notification/notification-content-documents-list-item-name.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Name />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-documents-list-item-name-wireframe></velt-notifications-panel-content-documents-list-item-name-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Documents List Item Count

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-documents-list-item-count.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=ae3559a709922a5556127ef7bddc9f90" alt="" width="1280" height="297" data-path="images/customization/notification/notification-content-documents-list-item-count.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Count />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-documents-list-item-count-wireframe></velt-notifications-panel-content-documents-list-item-count-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Documents List Item Content

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-documents-list-item-content.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=a6f61e0a723928adeb39a0f32062a356" alt="" width="1280" height="645" data-path="images/customization/notification/notification-content-documents-list-item-content.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
            <VeltNotificationsPanelWireframe.Content.List />
            <VeltNotificationsPanelWireframe.Content.LoadMore />
        </VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-documents-list-item-content-wireframe>
            <velt-notifications-panel-content-list-wireframe></velt-notifications-panel-content-list-wireframe>
            <velt-notifications-panel-content-load-more-wireframe></velt-notifications-panel-content-load-more-wireframe>
        </velt-notifications-panel-content-documents-list-item-content-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### People

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-people.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=915981deb66a248e08ef0c287a75bbf2" alt="" width="1280" height="576" data-path="images/customization/notification/notification-content-people.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.People>
            <VeltNotificationsPanelWireframe.Content.People.List />
            <VeltNotificationsPanelWireframe.Content.AllReadContainer />
        </VeltNotificationsPanelWireframe.Content.People>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-people-wireframe>
            <velt-notifications-panel-content-people-list-wireframe></velt-notifications-panel-content-people-list-wireframe>
            <velt-notifications-panel-content-all-read-container-wireframe></velt-notifications-panel-content-all-read-container-wireframe>
        </velt-notifications-panel-content-people-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### People List

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-people-list.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=6ef446f5b05deb870fb60c96a0fc9452" alt="" width="1280" height="576" data-path="images/customization/notification/notification-content-people-list.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.People.List>
            <VeltNotificationsPanelWireframe.Content.People.List.Item />
        </VeltNotificationsPanelWireframe.Content.People.List>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-people-list-wireframe>
            <velt-notifications-panel-content-people-list-item-wireframe></velt-notifications-panel-content-people-list-item-wireframe>
        </velt-notifications-panel-content-people-list-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### People List Item

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-people-list-item.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=0499a23774a2d50bc96577fe8948fd05" alt="" width="1280" height="548" data-path="images/customization/notification/notification-content-people-list-item.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.People.List.Item>
            <VeltNotificationsPanelWireframe.Content.People.List.Item.Avatar />
            <VeltNotificationsPanelWireframe.Content.People.List.Item.Name />
            <VeltNotificationsPanelWireframe.Content.People.List.Item.Count />
            <VeltNotificationsPanelWireframe.Content.People.List.Item.Content />
        </VeltNotificationsPanelWireframe.Content.People.List.Item>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-people-list-item-wireframe>
            <velt-notifications-panel-content-people-list-item-avatar-wireframe></velt-notifications-panel-content-people-list-item-avatar-wireframe>
            <velt-notifications-panel-content-people-list-item-name-wireframe></velt-notifications-panel-content-people-list-item-name-wireframe>
            <velt-notifications-panel-content-people-list-item-count-wireframe></velt-notifications-panel-content-people-list-item-count-wireframe>
            <velt-notifications-panel-content-people-list-item-content-wireframe></velt-notifications-panel-content-people-list-item-content-wireframe>
        </velt-notifications-panel-content-people-list-item-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### People List Item Avatar

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-people-list-item-unread.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=585180e7e94915db0de40b5cee8d3517" alt="" width="1280" height="297" data-path="images/customization/notification/notification-content-people-list-item-unread.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.People.List.Item.Avatar />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-people-list-item-avatar-wireframe></velt-notifications-panel-content-people-list-item-avatar-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### People List Item Name

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-people-list-item-name.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=1bfa13bd29afff66911b67d963e0320e" alt="" width="1280" height="297" data-path="images/customization/notification/notification-content-people-list-item-name.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.People.List.Item.Name />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-people-list-item-name-wireframe></velt-notifications-panel-content-people-list-item-name-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### People List Item Count

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-people-list-item-count.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=970ee3f1cafea69c74f351839bfc9413" alt="" width="1280" height="297" data-path="images/customization/notification/notification-content-people-list-item-count.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.People.List.Item.Count />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-people-list-item-count-wireframe></velt-notifications-panel-content-people-list-item-count-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### People List Item Content

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-content-people-list-item-content.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=34648f571f6e8223fd471689dfd99646" alt="" width="1280" height="645" data-path="images/customization/notification/notification-content-people-list-item-content.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
            <VeltNotificationsPanelWireframe.Content.List />
            <VeltNotificationsPanelWireframe.Content.LoadMore />
        </VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-people-list-item-content-wireframe>
            <velt-notifications-panel-content-list-wireframe></velt-notifications-panel-content-list-wireframe>
            <velt-notifications-panel-content-load-more-wireframe></velt-notifications-panel-content-load-more-wireframe>
        </velt-notifications-panel-content-people-list-item-content-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Settings

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=b877987a181f5054685b1953eae56242" alt="" width="1280" height="541" data-path="images/customization/notification/notification-settings.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings>
            <VeltNotificationsPanelWireframe.Settings.Header />
            <VeltNotificationsPanelWireframe.Settings.Title />
            <VeltNotificationsPanelWireframe.Settings.Description />
            <VeltNotificationsPanelWireframe.Settings.List />
            <VeltNotificationsPanelWireframe.Settings.Footer />
        </VeltNotificationsPanelWireframe.Settings>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-wireframe>
            <velt-notifications-panel-settings-header-wireframe></velt-notifications-panel-settings-header-wireframe>
            <velt-notifications-panel-settings-title-wireframe></velt-notifications-panel-settings-title-wireframe>
            <velt-notifications-panel-settings-description-wireframe></velt-notifications-panel-settings-description-wireframe>
            <velt-notifications-panel-settings-list-wireframe></velt-notifications-panel-settings-list-wireframe>
            <velt-notifications-panel-settings-footer-wireframe></velt-notifications-panel-settings-footer-wireframe>
        </velt-notifications-panel-settings-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Settings Header

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-header.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=7405f68a5b5d5b29f84509626af273e6" alt="" width="1280" height="318" data-path="images/customization/notification/notification-settings-header.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.Header>
            <VeltNotificationsPanelWireframe.Settings.BackButton />
            <VeltNotificationsPanelWireframe.Settings.Header.Title />
        </VeltNotificationsPanelWireframe.Settings.Header>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-header-wireframe>
            <velt-notifications-panel-settings-back-button-wireframe></velt-notifications-panel-settings-back-button-wireframe>
            <velt-notifications-panel-settings-header-title-wireframe></velt-notifications-panel-settings-header-title-wireframe>
        </velt-notifications-panel-settings-header-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Header BackButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-header-back-button.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=6ca2b59c7869b1bce6c7677d7996ecbe" alt="" width="1280" height="318" data-path="images/customization/notification/notification-settings-header-back-button.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.BackButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-back-button-wireframe></velt-notifications-panel-settings-back-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Header Title

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-header-title.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=8621cb94d416deef407f4f468824a609" alt="" width="1280" height="318" data-path="images/customization/notification/notification-settings-header-title.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.Header.Title />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-header-title-wireframe></velt-notifications-panel-settings-header-title-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Settings Title

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-title.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=87d4376e76a8a57bf8b4eaf4e7d23c73" alt="" width="1280" height="318" data-path="images/customization/notification/notification-settings-title.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.Title />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-title-wireframe></velt-notifications-panel-settings-title-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Settings Description

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-description.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=177bc01076941f4e64b52afd0cf0fa09" alt="" width="1280" height="318" data-path="images/customization/notification/notification-settings-description.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.Description />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-description-wireframe></velt-notifications-panel-settings-description-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Settings List

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-list.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=a6e1f1bd6d3b7aa4493f1ee21cb55fc1" alt="" width="1280" height="489" data-path="images/customization/notification/notification-settings-list.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.List>
            <VeltNotificationsPanelWireframe.Settings.List.Accordion />
        </VeltNotificationsPanelWireframe.Settings.List>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-list-wireframe>
            <velt-notifications-panel-settings-accordion-wireframe></velt-notifications-panel-settings-accordion-wireframe>
        </velt-notifications-panel-settings-list-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Settings List Accordion

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-list-accordion.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=f7e56a3ed759f2d23d00763fce9fa456" alt="" width="1280" height="489" data-path="images/customization/notification/notification-settings-list-accordion.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion>
            <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger />
            <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content />
        </VeltNotificationsPanelWireframe.Settings.List.Accordion>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-accordion-wireframe>
            <velt-notifications-panel-settings-accordion-trigger-wireframe></velt-notifications-panel-settings-accordion-trigger-wireframe>
            <velt-notifications-panel-settings-accordion-content-wireframe></velt-notifications-panel-settings-accordion-content-wireframe>
        </velt-notifications-panel-settings-accordion-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Accordion Trigger

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-accordion-trigger.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=9b3f161a40b43196ecc319b08aeb82be" alt="" width="1280" height="338" data-path="images/customization/notification/notification-settings-accordion-trigger.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger>
            <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Label />
            <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.SelectedValue />
            <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Icon />
        </VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-accordion-trigger-wireframe>
            <velt-notifications-panel-settings-accordion-trigger-label-wireframe></velt-notifications-panel-settings-accordion-trigger-label-wireframe>
            <velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe></velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe>
            <velt-notifications-panel-settings-accordion-trigger-icon-wireframe></velt-notifications-panel-settings-accordion-trigger-icon-wireframe>
        </velt-notifications-panel-settings-accordion-trigger-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Accordion Trigger Label

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-accordion-trigger-label.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=397f3f74e11a6505d670ea2d93f87ea9" alt="" width="1280" height="338" data-path="images/customization/notification/notification-settings-accordion-trigger-label.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Label />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-accordion-trigger-label-wireframe></velt-notifications-panel-settings-accordion-trigger-label-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Accordion Trigger SelectedValue

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-accordion-trigger-selected-value.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=1bd98db96e7c0c4400bc427f958c4b8a" alt="" width="1280" height="338" data-path="images/customization/notification/notification-settings-accordion-trigger-selected-value.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.SelectedValue />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe></velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Accordion Trigger Icon

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-accordion-trigger-icon.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=35b51dc5edffbd0342d870ae170380ea" alt="" width="1280" height="338" data-path="images/customization/notification/notification-settings-accordion-trigger-icon.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Icon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-accordion-trigger-icon-wireframe></velt-notifications-panel-settings-accordion-trigger-icon-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Accordion Content

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-accordion-content.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=31e332f590f8946ec3bc4574e1a80d08" alt="" width="1280" height="489" data-path="images/customization/notification/notification-settings-accordion-content.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
            <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item />
        </VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-accordion-content-wireframe>
            <velt-notifications-panel-settings-accordion-content-item-wireframe></velt-notifications-panel-settings-accordion-content-item-wireframe>
        </velt-notifications-panel-settings-accordion-content-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Accordion Content Item

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-accordion-content-item.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=fae84b06514da1b7341440355d07f0ce" alt="" width="1280" height="489" data-path="images/customization/notification/notification-settings-accordion-content-item.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item>
            <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Icon />
            <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Label />
        </VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-accordion-content-item-wireframe>
            <velt-notifications-panel-settings-accordion-content-item-icon-wireframe></velt-notifications-panel-settings-accordion-content-item-icon-wireframe>
            <velt-notifications-panel-settings-accordion-content-item-label-wireframe></velt-notifications-panel-settings-accordion-content-item-label-wireframe>
        </velt-notifications-panel-settings-accordion-content-item-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Accordion Content Item Icon

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-accordion-content-item-icon.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=39c6f6def94d01d897ad525d7e1c3fe3" alt="" width="1280" height="308" data-path="images/customization/notification/notification-settings-accordion-content-item-icon.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Icon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-accordion-content-item-icon-wireframe></velt-notifications-panel-settings-accordion-content-item-icon-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Accordion Content Item Label

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-accordion-content-item-label.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=b4cdc0b12c760af6cf63701a9d2be7e2" alt="" width="1280" height="308" data-path="images/customization/notification/notification-settings-accordion-content-item-label.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Label />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-accordion-content-item-label-wireframe></velt-notifications-panel-settings-accordion-content-item-label-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Settings Footer

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-footer.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=7351991ca2f1f3000fa87c4a564ac2ea" alt="" width="1280" height="308" data-path="images/customization/notification/notification-settings-footer.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.Footer>
            <VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
            <VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
            <VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
        </VeltNotificationsPanelWireframe.Settings.Footer>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-footer-wireframe>
            <velt-notifications-panel-settings-mute-all-title-wireframe></velt-notifications-panel-settings-mute-all-title-wireframe>
            <velt-notifications-panel-settings-mute-all-description-wireframe></velt-notifications-panel-settings-mute-all-description-wireframe>
            <velt-notifications-panel-settings-mute-all-toggle-wireframe></velt-notifications-panel-settings-mute-all-toggle-wireframe>
        </velt-notifications-panel-settings-footer-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### MuteAllTitle

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-footer-mute-all-title.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=de8ccc6a6dd33a34052da8b00cc57030" alt="" width="1280" height="308" data-path="images/customization/notification/notification-settings-footer-mute-all-title.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-mute-all-title-wireframe></velt-notifications-panel-settings-mute-all-title-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### MuteAllDescription

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-footer-mute-all-description.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=75b9dc45260193e6832e3cf17c5c0876" alt="" width="1280" height="308" data-path="images/customization/notification/notification-settings-footer-mute-all-description.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-mute-all-description-wireframe></velt-notifications-panel-settings-mute-all-description-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### MuteAllToggle

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/notification-settings-footer-mute-all-toggle.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=890a5191da575f622b5b264ef0661343" alt="" width="1280" height="308" data-path="images/customization/notification/notification-settings-footer-mute-all-toggle.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-settings-mute-all-toggle-wireframe></velt-notifications-panel-settings-mute-all-toggle-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Shared Components

### Content List

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/common-content-list.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=c69157f38073db3bebe6b099f2260744" alt="" width="1280" height="541" data-path="images/customization/notification/common-content-list.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.List>
            <VeltNotificationsPanelWireframe.Content.List.Item />
        </VeltNotificationsPanelWireframe.Content.List>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-list-wireframe>
            <velt-notifications-panel-content-list-item-wireframe></velt-notifications-panel-content-list-item-wireframe>
        </velt-notifications-panel-content-list-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Content List Item

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/common-content-list-item.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=864ec3bce21046beec340c41e77a5365" alt="" width="1280" height="541" data-path="images/customization/notification/common-content-list-item.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.List.Item>
            <VeltNotificationsPanelWireframe.Content.List.Item.Avatar />
            <VeltNotificationsPanelWireframe.Content.List.Item.Unread />
            <VeltNotificationsPanelWireframe.Content.List.Item.Headline />
            <VeltNotificationsPanelWireframe.Content.List.Item.Body />
            <VeltNotificationsPanelWireframe.Content.List.Item.FileName />
            <VeltNotificationsPanelWireframe.Content.List.Item.Time />
        </VeltNotificationsPanelWireframe.Content.List.Item>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-list-item-wireframe>
            <velt-notifications-panel-content-list-item-avatar-wireframe></velt-notifications-panel-content-list-item-avatar-wireframe>
            <velt-notifications-panel-content-list-item-unread-wireframe></velt-notifications-panel-content-list-item-unread-wireframe>
            <velt-notifications-panel-content-list-item-headline-wireframe></velt-notifications-panel-content-list-item-headline-wireframe>
            <velt-notifications-panel-content-list-item-body-wireframe></velt-notifications-panel-content-list-item-body-wireframe>
            <velt-notifications-panel-content-list-item-file-name-wireframe></velt-notifications-panel-content-list-item-file-name-wireframe>
            <velt-notifications-panel-content-list-item-time-wireframe></velt-notifications-panel-content-list-item-time-wireframe>
        </velt-notifications-panel-content-list-item-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Content List Item Avatar

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/common-content-list-item-avatar.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=fe6e2e58f2c69a48d056ee9a319bf25d" alt="" width="1280" height="363" data-path="images/customization/notification/common-content-list-item-avatar.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.List.Item.Avatar />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-list-item-avatar-wireframe></velt-notifications-panel-content-list-item-avatar-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Content List Item Unread

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/common-content-list-item-unread.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=e3acf9f8001172bcec33f474cc5dd078" alt="" width="1280" height="363" data-path="images/customization/notification/common-content-list-item-unread.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.List.Item.Unread />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-list-item-unread-wireframe></velt-notifications-panel-content-list-item-unread-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Content List Item Headline

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/common-content-list-item-headline.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=747932efad5088a56e0b7399243ef78a" alt="" width="1280" height="363" data-path="images/customization/notification/common-content-list-item-headline.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.List.Item.Headline />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-list-item-headline-wireframe></velt-notifications-panel-content-list-item-headline-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Content List Item Body

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/common-content-list-item-body.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=3174b3294ce9144609f7deb7e01662ee" alt="" width="1280" height="363" data-path="images/customization/notification/common-content-list-item-body.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.List.Item.Body />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-list-item-body-wireframe></velt-notifications-panel-content-list-item-body-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Content List Item FileName

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/common-content-list-item-file-name.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=da072ce12fbf9aba871e831a133836f0" alt="" width="1280" height="363" data-path="images/customization/notification/common-content-list-item-file-name.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.List.Item.FileName />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-list-item-file-name-wireframe></velt-notifications-panel-content-list-item-file-name-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Content List Item Time

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/common-content-list-item-time.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=924f42f419ba6bbcd54b66f34cd4b283" alt="" width="1280" height="363" data-path="images/customization/notification/common-content-list-item-time.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.List.Item.Time />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-list-item-time-wireframe></velt-notifications-panel-content-list-item-time-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### LoadMore

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/common-content-load-more.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=30ca38bddd46661698e2cfddd1fad0f7" alt="" width="1280" height="363" data-path="images/customization/notification/common-content-load-more.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.LoadMore />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-load-more-wireframe></velt-notifications-panel-content-load-more-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### AllReadContainer

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/C6LWI5jxwnb6UJdP/images/customization/notification/common-content-all-read-container.png?fit=max&auto=format&n=C6LWI5jxwnb6UJdP&q=85&s=e204376d6e9d69db37cddea7a733a16e" alt="" width="1280" height="576" data-path="images/customization/notification/common-content-all-read-container.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-panel-content-all-read-container-wireframe></velt-notifications-panel-content-all-read-container-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Styling

### Disable ShadowDOM

* By default, ShadowDOM is used to ensure that your app's CSS does not interfere with the styling of the SDK components.
* Disable the shadow dom to apply your custom CSS to the component.

`Default: true`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanel shadowDom={false} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-notifications-panel shadow-dom="false"></velt-notifications-panel>
    ```
  </Tab>
</Tabs>

### Dark Mode

`Default: false`

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

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