> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-4.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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-overview.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=94579ec849dc86239b0234b3e8d853d6" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-title.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=bd8b65ab0ec10efacb54d2495b81ea70" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-read-all.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=df6d1f4126b57e617f0bd2e4cc879fca" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-skeleton.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=80661f6c2088f36c1344bb93bdf7153d" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-header.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=86c9a7114d1feccef385f1d7580174ae" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-header-tab-all.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=89b1ba2138f5617d698d591b53a3881e" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-header-tab-documents.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=4446d124f82aa2e71a26a8d476f47787" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-header-tab-for-you.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=6cd22ec9ce1bb3c118c82ed295a4dc62" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-header-people.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=5bf2211506af96b1ff592d402fac4b54" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=e7e77bb32c2c1229b88120a9876af954" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-for-you.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=6c09591bee9fe30b476b9c7af09f95ff" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-all.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=0a8372e94528766ae6b61e39ae230758" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-all-list.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=ab21febc044bbbaca70fd896eb86820f" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-all-list-item.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=161bb19c2cd8109c4249939d2c0ee4a5" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-all-list-item-label.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=201a7e380184fc81e0c6ec42973d56af" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-all-list-item-content.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=c7014ddf7e167612791e576eafdde996" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-documents.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=9394f56caeb4ffd74ba992696c61ae5c" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-documents-list.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=72b40942dac6d23a26d9af33196e0419" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-documents-list-item.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=5d9a750c4d6a4a3cf2ea7314bced69d9" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-documents-list-item-unread.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=9cebd6dde057de1a72ca7a7cc586a9e0" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-documents-list-item-name.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=f46ceb6c1c6875d63999a72497eefe4b" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-documents-list-item-count.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=16900d34746c6f481679fe4758fc7649" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-documents-list-item-content.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=c9614a15457f4bb0ec3df6458bc73147" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-people.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=2ca72f42b1d3f44f3e6f999e57f33a61" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-people-list.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=dd3fa4bb70eb1708733eb80b8c7c58aa" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-people-list-item.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=fef716d4f7f08221170e94a73da522eb" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-people-list-item-unread.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=4d6cd9c98dcaadb86a7c5f8f959dc293" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-people-list-item-name.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=81eb5c530f3bc629ad032919be791e3d" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-people-list-item-count.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=7b538808fac334f85507741c2110ddcd" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-content-people-list-item-content.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=bff5865b02b0afba92e6b2fda84f7935" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=d04c34d574fcf8dde245e5974e7b3429" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-header.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=775887b6459cfc89370a95cbe6c39e0e" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-header-back-button.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=45b9876bb9366ed5af6d8893702d1cec" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-header-title.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=a51c2656d810c879ccac1c0712ef9941" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-title.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=aa14c5de001ec0839a0091e948c9422c" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-description.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=e12017349837ef2236985f294dab9c94" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-list.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=c18da4a4613aff15238e7564a9a95a87" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-list-accordion.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=3c674f8cc229e36705f10824fa36602a" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-accordion-trigger.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=6338269dc1505dfbf88afb369fe6494a" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-accordion-trigger-label.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=2e2c98a5365391078ec1b770011cbccb" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-accordion-trigger-selected-value.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=119c278221bfb89143d61ae1d7949ecb" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-accordion-trigger-icon.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=f74ba65f3d86ef7c234f0bc41a881c29" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-accordion-content.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=fac0e250e55d3e6ea5a898095825dd08" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-accordion-content-item.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=bc9841a3b9376f4a00ace4a196629d30" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-accordion-content-item-icon.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=b97842002bfac4457934edaa57c2b534" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-accordion-content-item-label.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=47d80f6ebdb03ea075e2964f341a6e6c" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-footer.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=4ba5d02cdb7eb6e9c67ccbd740663060" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-footer-mute-all-title.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=59aaed8f8a8cf29bb09b4102ea5dfe1b" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-footer-mute-all-description.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=9551aa69e28e7f07a135d36672834b6a" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/notification-settings-footer-mute-all-toggle.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=d8948a334cf9205bf490135fecdd01b1" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/common-content-list.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=8ef4d873f2f264d87b878c155bb64bb3" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/common-content-list-item.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=fa953fe0805174c5ec88b29ab094b0f6" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/common-content-list-item-avatar.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=c2c6e858942e67ff322382898c9c5264" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/common-content-list-item-unread.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=d0dcf496c62f61d64b3f433f063ec834" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/common-content-list-item-headline.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=db696455fb07e8828826424303cdc2d3" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/common-content-list-item-body.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=5b1738f1bc2ad78a8a54283ee0780c4d" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/common-content-list-item-file-name.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=a9e566d9efcb3227d967ac76b08173a8" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/common-content-list-item-time.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=9605e53c0431dcf6c1956b48f568d9b1" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/common-content-load-more.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=343e566385947adead5fac1037d78656" 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-4/FOR5PEZIovbJJ0-n/images/customization/notification/common-content-all-read-container.png?fit=max&auto=format&n=FOR5PEZIovbJJ0-n&q=85&s=f4d4dca4dad412ff98fe8aaf48bad6b4" 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>
