We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

Overview

<VeltWireframe>
    <VeltNotificationsPanelWireframe>
        <VeltNotificationsPanelWireframe.Title />
        <VeltNotificationsPanelWireframe.ReadAllButton />
        <VeltNotificationsPanelWireframe.SettingsButton />
        <VeltNotificationsPanelWireframe.Skeleton />
        <VeltNotificationsPanelWireframe.Header />
        <VeltNotificationsPanelWireframe.Content />
        <VeltNotificationsPanelWireframe.Settings />
    </VeltNotificationsPanelWireframe>
</VeltWireframe>

Title

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Title />
</VeltWireframe>

ReadAllButton

<VeltWireframe>
    <VeltNotificationsPanelWireframe.ReadAllButton />
</VeltWireframe>

Skeleton

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Skeleton />
</VeltWireframe>

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header>
        <VeltNotificationsPanelWireframe.Header.TabAll />
        <VeltNotificationsPanelWireframe.Header.TabDocuments />
        <VeltNotificationsPanelWireframe.Header.TabForYou />
        <VeltNotificationsPanelWireframe.Header.TabPeople />
    </VeltNotificationsPanelWireframe.Header>
</VeltWireframe>

TabAll

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabAll />
</VeltWireframe>

TabDocuments

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabDocuments />
</VeltWireframe>

TabForYou

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabForYou />
</VeltWireframe>

TabPeople

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabPeople />
</VeltWireframe>

Content

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content>
        <VeltNotificationsPanelWireframe.Content.ForYou />
        <VeltNotificationsPanelWireframe.Content.All />
        <VeltNotificationsPanelWireframe.Content.Documents />
        <VeltNotificationsPanelWireframe.Content.People />
    </VeltNotificationsPanelWireframe.Content>
</VeltWireframe>

ForYou

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.ForYou>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.ForYou>
</VeltWireframe>

All

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All>
        <VeltNotificationsPanelWireframe.Content.All.List />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.All>
</VeltWireframe>

All List

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All.List>
        <VeltNotificationsPanelWireframe.Content.All.List.Item />
    </VeltNotificationsPanelWireframe.Content.All.List>
</VeltWireframe>

All List Item

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All.List.Item>
        <VeltNotificationsPanelWireframe.Content.All.List.Item.Label />
        <VeltNotificationsPanelWireframe.Content.All.List.Item.Content />
    </VeltNotificationsPanelWireframe.Content.All.List.Item>
</VeltWireframe>

All List Item Label

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All.List.Item.Label />
</VeltWireframe>

All List Item Content

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
    </VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
</VeltWireframe>

Documents

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents>
        <VeltNotificationsPanelWireframe.Content.Documents.List />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.Documents>
</VeltWireframe>

Documents List

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List>
        <VeltNotificationsPanelWireframe.Content.Documents.List.Item />
    </VeltNotificationsPanelWireframe.Content.Documents.List>
</VeltWireframe>

Documents List Item

<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>

Documents List Item Unread

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Unread />
</VeltWireframe>

Documents List Item Name

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Name />
</VeltWireframe>

Documents List Item Count

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Count />
</VeltWireframe>

Documents List Item Content

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
    </VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
</VeltWireframe>

People

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People>
        <VeltNotificationsPanelWireframe.Content.People.List />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.People>
</VeltWireframe>

People List

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List>
        <VeltNotificationsPanelWireframe.Content.People.List.Item />
    </VeltNotificationsPanelWireframe.Content.People.List>
</VeltWireframe>

People List Item

<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>

People List Item Avatar

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Avatar />
</VeltWireframe>

People List Item Name

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Name />
</VeltWireframe>

People List Item Count

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Count />
</VeltWireframe>

People List Item Content

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
    </VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
</VeltWireframe>

Settings

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings>
        <VeltNotificationsPanelWireframe.Settings.Header />
        <VeltNotificationsPanelWireframe.Settings.Title />
        <VeltNotificationsPanelWireframe.Settings.Description />
        <VeltNotificationsPanelWireframe.Settings.List />
        <VeltNotificationsPanelWireframe.Settings.Footer />
    </VeltNotificationsPanelWireframe.Settings>
</VeltWireframe>

Settings Header

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Header>
        <VeltNotificationsPanelWireframe.Settings.BackButton />
        <VeltNotificationsPanelWireframe.Settings.Header.Title />
    </VeltNotificationsPanelWireframe.Settings.Header>
</VeltWireframe>

Header BackButton

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.BackButton />
</VeltWireframe>

Header Title

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Header.Title />
</VeltWireframe>

Settings Title

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Title />
</VeltWireframe>

Settings Description

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Description />
</VeltWireframe>

Settings List

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion />
    </VeltNotificationsPanelWireframe.Settings.List>
</VeltWireframe>

Settings List Accordion

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger />
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content />
    </VeltNotificationsPanelWireframe.Settings.List.Accordion>
</VeltWireframe>

Accordion Trigger

<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>

Accordion Trigger Label

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Label />
</VeltWireframe>

Accordion Trigger SelectedValue

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.SelectedValue />
</VeltWireframe>

Accordion Trigger Icon

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Icon />
</VeltWireframe>

Accordion Content

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item />
    </VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
</VeltWireframe>

Accordion Content Item

<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>

Accordion Content Item Icon

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Icon />
</VeltWireframe>

Accordion Content Item Label

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Label />
</VeltWireframe>

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Footer>
        <VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
        <VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
        <VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
    </VeltNotificationsPanelWireframe.Settings.Footer>
</VeltWireframe>

MuteAllTitle

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
</VeltWireframe>

MuteAllDescription

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
</VeltWireframe>

MuteAllToggle

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
</VeltWireframe>

Shared Components

Content List

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List>
        <VeltNotificationsPanelWireframe.Content.List.Item />
    </VeltNotificationsPanelWireframe.Content.List>
</VeltWireframe>

Content List Item

<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>

Content List Item Avatar

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Avatar />
</VeltWireframe>

Content List Item Unread

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Unread />
</VeltWireframe>

Content List Item Headline

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Headline />
</VeltWireframe>

Content List Item Body

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Body />
</VeltWireframe>

Content List Item FileName

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.FileName />
</VeltWireframe>

Content List Item Time

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Time />
</VeltWireframe>

LoadMore

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.LoadMore />
</VeltWireframe>

AllReadContainer

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.AllReadContainer />
</VeltWireframe>

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

<VeltNotificationsPanel shadowDom={false} />

Dark Mode

Default: false

<VeltNotificationsPanel darkMode={true} />