> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-8.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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-overview.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=b93230ebc0bbe6990a389cb2de6dc380" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-title.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=762e0fabc1efa134d78d15dbedcee238" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-read-all.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=62cbc460f74ec9fb5915bc06c1071ec6" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-skeleton.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=b8c1053ec80bbe5f87cd357edae0a481" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-header.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=7264c7247de7be7eabd9fa4b200e0828" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-header-tab-all.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=4e1fe7bbb38666fd023440a6b7032bc2" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-header-tab-documents.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=4f3d8c2fe90375f0e587faff77679991" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-header-tab-for-you.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=51653c820a8b0c29e7d953f92f098bb9" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-header-people.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=1ee0f9254ed348978d11daf3c8d5630a" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=525f7a8371a3e53f6700e4b83b4df14e" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-for-you.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=7224b0e9669559e73f28ab1dcd98f9e7" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-all.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=e63b963c4781e7c72e66245823db67a0" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-all-list.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=2673dfa6b5feb2a7b5c37b810827c3aa" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-all-list-item.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=82dcfe0a59a3fc31aa386db4daa2ca87" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-all-list-item-label.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=25dff5a7d69f7823450168105e12c43e" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-all-list-item-content.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=47dab4f645f32f7641f15c3eb47fdbe9" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-documents.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=fb45fd6e726b29e94f5a8d288b1768e9" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-documents-list.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=d96c0c79ddefd42cbc8ded37a4da6ee2" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-documents-list-item.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=6c98d4b05e7231d80978de664678a3d4" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-documents-list-item-unread.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=4f63522a3d31196f9d204a79e4530503" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-documents-list-item-name.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=2206b45c6ada44d364c88df050f34004" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-documents-list-item-count.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=35cde26446de9ae0aa3fa00876dd5cb3" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-documents-list-item-content.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=491ea416a4beb2adcfb3dfb0ae0a8a44" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-people.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=a4bd04afbaddb0c1459a63c3f48fb8e6" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-people-list.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=0b0c1923e456756a051ca62ba72d5571" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-people-list-item.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=82a3a1f2437ff6a481301503adab25a2" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-people-list-item-unread.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=25a7db08c38ee9cbbdfa90ae7fceb0a8" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-people-list-item-name.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=be21c01b993349092c5e84af87b3d7ec" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-people-list-item-count.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=9aa5c15492724778e38fffd801dd4949" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-content-people-list-item-content.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=f191e30302b98e5005b300e6987a68ba" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=a0f544b12370912cf4d4d95952a2c76f" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-header.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=4babc158d961652ee6c147f189daba30" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-header-back-button.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=8be6ea536d2c52fd604049d3ed1a9b40" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-header-title.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=a2da8daa4a7682b4f7efc80f74a350db" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-title.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=86577fd327876e05cf304f3eb29bef44" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-description.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=72eb085af83a475118bccc29fbd2cba4" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-list.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=facf472b9db6d2a643a2665bbce1714d" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-list-accordion.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=76b5695521cef82b775cc38067aecbf8" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-accordion-trigger.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=9314319c378b61653509fa46ba85d471" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-accordion-trigger-label.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=85f0c8cea2413c8cc727bd765a96aacd" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-accordion-trigger-selected-value.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=c991d8caba3538b56d63b39625a39560" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-accordion-trigger-icon.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=f0a91f7c6e48b9b69262889e2519c1aa" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-accordion-content.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=26db05bafea1e1554939a15eef099e6f" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-accordion-content-item.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=2eeba0405b3f14ad3906f8c5194be7c1" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-accordion-content-item-icon.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=1f5c5d6e51514df66fb9675332955a52" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-accordion-content-item-label.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=e86e952bd7fe9889863fe9ad5a6871c5" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-footer.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=56b95a03d4f2569d20176eab7031ce0e" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-footer-mute-all-title.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=aa6f29c257f1cec1a1ea4a709ee84579" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-footer-mute-all-description.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=c971ae271f77e006b619c602a9abaf2b" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/notification-settings-footer-mute-all-toggle.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=bb31c6bfc6359e1ba0591736a70843af" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/common-content-list.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=24930df7ff4ceeca5c0cc507ce8ae3e3" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/common-content-list-item.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=0e305f1f081b1bb43b92fcabe9ac025f" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/common-content-list-item-avatar.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=016d7090fd8a2c5633527d21c9175211" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/common-content-list-item-unread.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=7a99def40008b04683e53beeb3ab11ba" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/common-content-list-item-headline.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=29cf401b23d3699947cd3f049c4455f6" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/common-content-list-item-body.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=76dd8c7d1d75037d654fb5d2c99c92c8" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/common-content-list-item-file-name.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=6b6032ab1aae1cf1691802b58e899396" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/common-content-list-item-time.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=c2c0577f5fc911489f9171831a5de71a" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/common-content-load-more.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=8c02333041db09343cd168d84c7045ae" 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-8/bXwiILb7QqzhM0sz/images/customization/notification/common-content-all-read-container.png?fit=max&auto=format&n=bXwiILb7QqzhM0sz&q=85&s=235142d47f886554d3b9018eb8b57a23" 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>
