> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-5.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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-overview.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=aa23addcc2262a54d6b7ab5afc8f03bc" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-title.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=ffecd8e51d7d4949846548f687010d1c" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-read-all.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=af6f5d60802b41452479fedbc60e1c27" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-skeleton.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=5cc510bff9c071d331a521bffcdb81bf" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-header.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=0d593622ae36bbe0ea5e8361a7fe891d" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-header-tab-all.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=bdaf06b77844a27c4398197d4ca0f0ad" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-header-tab-documents.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=71af301652fa5c96b972bf8f76d11b47" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-header-tab-for-you.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=f27aaaa4e5da03dd080349220dcd51fb" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-header-people.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=6952e3e22ffc65a74e7c0e070b6add1b" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=f9e45cfd132c714367f6b649696ad828" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-for-you.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=710eafa6e1736bb0d6c0442cb4278e13" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-all.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=ca7d9ddf8797c287617993d4fd4e0bff" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-all-list.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=c6117ec18b4d3086e3fa0711f0416860" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-all-list-item.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=d56f11b9cd2fbf821d0e4fde36be35d0" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-all-list-item-label.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=05c3ef9def7608e7bd3a6966cfacf0aa" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-all-list-item-content.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=c62b32b4907f7d7413bce7f57c309e4e" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-documents.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=30272d4f36bc252efa2de8213108fb42" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-documents-list.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=d379933b52857b625bdb10baed0a9ee1" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-documents-list-item.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=159d4b70504e7ee320e3262e804eeab0" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-documents-list-item-unread.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=8915f1fd828414fb3d09efa83f2abd32" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-documents-list-item-name.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=ce1a853b692170b4e10b7e354513ef22" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-documents-list-item-count.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=b054fe26ea77a9b85d45806e67ca54e0" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-documents-list-item-content.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=a0869524d4977e65bca7608bf064cff6" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-people.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=96a9ff55013990a5e2ecacda28a3eda9" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-people-list.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=5ca6736dfc54e56e3f0435dc21127223" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-people-list-item.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=65702e82b5e3a4144e69e92a2a509211" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-people-list-item-unread.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=bde5053b7feb2a67953903c30a2d4d28" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-people-list-item-name.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=567013e2e48f10ab49b90a526d1568d2" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-people-list-item-count.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=fa76a5daeccfc254e2a7fdddb872e2f0" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-content-people-list-item-content.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=585b74cffc3517123a7c28805ae090e8" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=941b8857948f85361f5d9dea2834bf02" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-header.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=5f1eedfad5e1d14e68dbf4570a0bd91f" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-header-back-button.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=c9ac56f46642a5c991f67b7770ec30b5" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-header-title.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=248ff1fc9e53030bb832e5a1e249f451" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-title.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=9520db577c4dc2759db9eeea9028425e" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-description.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=c363b527a9b56b525cb175a8aa9b0cc8" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-list.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=66e18390101eecf261b0872df63699bc" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-list-accordion.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=925a334275ce606cfeaa16e6074c0eaf" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-accordion-trigger.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=550af21be603c1795e066be1bbd96d63" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-accordion-trigger-label.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=e4b792fc342e65e1a4f352d22a5e9f80" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-accordion-trigger-selected-value.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=bc99634c1f64e8955d3b0d464cef551f" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-accordion-trigger-icon.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=be65196b4260cf0362cb8aa10b922e7a" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-accordion-content.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=441da7e49c5ef0afb53251e9490cd023" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-accordion-content-item.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=3289a67ed37a337ff77358b71e170a92" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-accordion-content-item-icon.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=4ff5cede17babaf16897803e68d61456" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-accordion-content-item-label.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=0236c21918445e5b0e4a717bd4b8fc21" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-footer.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=eca590c0fdcb67d1ef9e09e4dc814c86" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-footer-mute-all-title.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=7a8b41934debe3d0e74eea327089acf9" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-footer-mute-all-description.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=6c6fc241fb84353b03356802b13525fb" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/notification-settings-footer-mute-all-toggle.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=7cbf960bf4bf816838019cbd8dd111e9" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/common-content-list.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=9293ff43e116bca54f5f48a2bd952efe" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/common-content-list-item.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=f65580ceeaa29c327552df65e98fb676" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/common-content-list-item-avatar.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=b0713ff1540bfa426cd681f2b1de13f6" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/common-content-list-item-unread.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=2b210d27b54bed4c73728bc06e5e7572" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/common-content-list-item-headline.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=81df6446ba18532ce702abaa36327e3f" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/common-content-list-item-body.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=be67e36f3f5f301be91ea6e99e36b412" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/common-content-list-item-file-name.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=dcdd8f90f7e7f8d42d7034f3332b1970" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/common-content-list-item-time.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=3a6567c60a1c8ceb4a214e5424778709" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/common-content-load-more.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=bb01b7153c02ff801d0a55c1f1370a67" 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-5/XOhKxPlhwIKZCR_Q/images/customization/notification/common-content-all-read-container.png?fit=max&auto=format&n=XOhKxPlhwIKZCR_Q&q=85&s=66f79357e4c789c043655f71d4c5c0e0" 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>
