> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-2.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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-overview.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=0547822755b7fbee595475d9ac736b82" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-title.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=9c81ba3eaf6a30fe60554e4fb5e2767e" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-read-all.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=5ddac06b415ec0df60e44ecd64d957ae" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-skeleton.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=bd78a8ea773a3f28b7e34418245471aa" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-header.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=9a1a7bac08b6a7bfa0de416adf176df2" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-header-tab-all.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=fbef6b6cde46fb4368763b8bb348dc3f" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-header-tab-documents.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=4ace10bd97cef845dc236c226203d642" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-header-tab-for-you.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=b043aefde1b48c4d1b988b3f74bbdb5e" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-header-people.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=6fe73ec187ba7757a292943176a55850" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=24c18585baa335447fd98f07d1d136aa" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-for-you.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=810e8241abd3acccec051c0e86e14b84" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-all.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=6c2c65eb46bb7372e880d9c6d40f1e5d" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-all-list.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=03c60ba89c95c9228db234b735e25840" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-all-list-item.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=df5c0c5b940aaed5d7fb245127d15f71" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-all-list-item-label.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=55bcab8806619bf07ca7fcf8e2ef95d2" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-all-list-item-content.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=c96ff0d286e8266be58c2520646dc7cd" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-documents.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=da02e27711215aa8fdbf7f50c4759a7f" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-documents-list.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=89280b019f312fc179481d95a5cdb58b" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-documents-list-item.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=cbadec37f9bd7de08df592c1a3f2bded" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-documents-list-item-unread.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=87df408f292c0b8ac2798e802043eddc" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-documents-list-item-name.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=78474021969b7c45ac3e1e55e0dce709" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-documents-list-item-count.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=2aa45d622339887a126b511b9bb3120e" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-documents-list-item-content.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=1b2b15cd36a21222577f3c3c8cb091df" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-people.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=0d7ad8eb55628c205cf66237651dfe50" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-people-list.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=c7329aa7e1c93e5c9e2c5f70d3531d80" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-people-list-item.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=5a52536ba54d839a02469156aca07393" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-people-list-item-unread.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=ac4a9760a346364878139e135521679d" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-people-list-item-name.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=11a073bd7a0bbf48442471cd48d1a974" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-people-list-item-count.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=8b34575f9da9702d1caf29b1ded312df" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-content-people-list-item-content.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=0b1bfe035927f4f3e6d203089edbe8ff" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=e490e0f383689d28f9edbbb6ae032a7c" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-header.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=8f71dabf1d48824506e9547e2fb180a9" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-header-back-button.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=89f18db91ee0bd40ab6f58bdd7218304" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-header-title.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=c28cfc17194c3fe408fb1e2bb4e5ea34" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-title.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=437e346aff309bc943333ea1c95f2703" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-description.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=a423907d324d33f7721114509462f350" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-list.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=63c6058187eb38842f8f5163e4e65d9d" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-list-accordion.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=032c036dba74548aeae2018b53fdbd99" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-accordion-trigger.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=7d60305608ca481425d636c4540217e8" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-accordion-trigger-label.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=42a3174447ab62f1dee8d1226042469c" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-accordion-trigger-selected-value.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=f6c3f80946bd1458f070216f387deead" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-accordion-trigger-icon.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=1f77455559815d10289f8a226cc8c300" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-accordion-content.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=b6327bb485b135aa5d6558e8eb79d9e6" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-accordion-content-item.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=96bec228699897a73f8767c3d5637e64" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-accordion-content-item-icon.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=b1695aefa3ec96a21a8edd9d9dc31c4f" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-accordion-content-item-label.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=df51986dc9d3c709f473016dc88b4927" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-footer.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=c3a09d09d85db04ed75ad38ea404c20a" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-footer-mute-all-title.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=055afcc9a1d24db7806893824e901309" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-footer-mute-all-description.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=b9484e5193d372167444731537371a10" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/notification-settings-footer-mute-all-toggle.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=86705fb6d40ce4dca2cbe1cae3fc7e1e" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/common-content-list.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=3b400255662ce71798d2468a8ec58744" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/common-content-list-item.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=9fd423a490568b286f500ab506d78b84" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/common-content-list-item-avatar.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=26412cc33812c872aaaff81f2ec395cd" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/common-content-list-item-unread.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=7bf6281870863a21b78c94803a4abbee" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/common-content-list-item-headline.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=979694dfb1d8b2f66a9b612f136b9d79" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/common-content-list-item-body.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=f7b582469e6427308a8ed779532ca948" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/common-content-list-item-file-name.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=5767347e60417ff31b74ad99bc618413" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/common-content-list-item-time.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=ffef879b93f025332f790cb845c2e3ec" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/common-content-load-more.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=810ca5af2e9a0df5a99ad59a5f6b6bc6" 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-2/DbH0zqBno4aLH0SS/images/customization/notification/common-content-all-read-container.png?fit=max&auto=format&n=DbH0zqBno4aLH0SS&q=85&s=7691d4d3421896f50d3f88157de30e8d" 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>
