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

​
Overview

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe>
        <VeltNotificationsPanelWireframe.Title />
        <VeltNotificationsPanelWireframe.ReadAllButton />
        <VeltNotificationsPanelWireframe.SettingsButton />
        <VeltNotificationsPanelWireframe.Skeleton />
        <VeltNotificationsPanelWireframe.Header />
        <VeltNotificationsPanelWireframe.Content />
        <VeltNotificationsPanelWireframe.Settings />
    </VeltNotificationsPanelWireframe>
</VeltWireframe>

​
Title

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Title />
</VeltWireframe>

​
ReadAllButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.ReadAllButton />
</VeltWireframe>

​
Skeleton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Skeleton />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header>
        <VeltNotificationsPanelWireframe.Header.TabAll />
        <VeltNotificationsPanelWireframe.Header.TabDocuments />
        <VeltNotificationsPanelWireframe.Header.TabForYou />
        <VeltNotificationsPanelWireframe.Header.TabPeople />
    </VeltNotificationsPanelWireframe.Header>
</VeltWireframe>

​
TabAll

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabAll />
</VeltWireframe>

​
TabDocuments

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabDocuments />
</VeltWireframe>

​
TabForYou

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabForYou />
</VeltWireframe>

​
TabPeople

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabPeople />
</VeltWireframe>

​
Content

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content>
        <VeltNotificationsPanelWireframe.Content.ForYou />
        <VeltNotificationsPanelWireframe.Content.All />
        <VeltNotificationsPanelWireframe.Content.Documents />
        <VeltNotificationsPanelWireframe.Content.People />
    </VeltNotificationsPanelWireframe.Content>
</VeltWireframe>

​
ForYou

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.ForYou>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.ForYou>
</VeltWireframe>

​
All

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All>
        <VeltNotificationsPanelWireframe.Content.All.List />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.All>
</VeltWireframe>

​
All List

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All.List>
        <VeltNotificationsPanelWireframe.Content.All.List.Item />
    </VeltNotificationsPanelWireframe.Content.All.List>
</VeltWireframe>

​
All List Item

  • React / Next.js
  • Other Frameworks
<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

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All.List.Item.Label />
</VeltWireframe>

​
All List Item Content

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
    </VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
</VeltWireframe>

​
Documents

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents>
        <VeltNotificationsPanelWireframe.Content.Documents.List />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.Documents>
</VeltWireframe>

​
Documents List

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List>
        <VeltNotificationsPanelWireframe.Content.Documents.List.Item />
    </VeltNotificationsPanelWireframe.Content.Documents.List>
</VeltWireframe>

​
Documents List Item

  • React / Next.js
  • Other Frameworks
<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

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Unread />
</VeltWireframe>

​
Documents List Item Name

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Name />
</VeltWireframe>

​
Documents List Item Count

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Count />
</VeltWireframe>

​
Documents List Item Content

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
    </VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
</VeltWireframe>

​
People

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People>
        <VeltNotificationsPanelWireframe.Content.People.List />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.People>
</VeltWireframe>

​
People List

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List>
        <VeltNotificationsPanelWireframe.Content.People.List.Item />
    </VeltNotificationsPanelWireframe.Content.People.List>
</VeltWireframe>

​
People List Item

  • React / Next.js
  • Other Frameworks
<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

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Avatar />
</VeltWireframe>

​
People List Item Name

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Name />
</VeltWireframe>

​
People List Item Count

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Count />
</VeltWireframe>

​
People List Item Content

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
    </VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
</VeltWireframe>

​
Settings

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings>
        <VeltNotificationsPanelWireframe.Settings.Header />
        <VeltNotificationsPanelWireframe.Settings.Title />
        <VeltNotificationsPanelWireframe.Settings.Description />
        <VeltNotificationsPanelWireframe.Settings.List />
        <VeltNotificationsPanelWireframe.Settings.Footer />
    </VeltNotificationsPanelWireframe.Settings>
</VeltWireframe>

​
Settings Header

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Header>
        <VeltNotificationsPanelWireframe.Settings.BackButton />
        <VeltNotificationsPanelWireframe.Settings.Header.Title />
    </VeltNotificationsPanelWireframe.Settings.Header>
</VeltWireframe>

​
Header BackButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.BackButton />
</VeltWireframe>

​
Header Title

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Header.Title />
</VeltWireframe>

​
Settings Title

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Title />
</VeltWireframe>

​
Settings Description

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Description />
</VeltWireframe>

​
Settings List

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion />
    </VeltNotificationsPanelWireframe.Settings.List>
</VeltWireframe>

​
Settings List Accordion

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger />
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content />
    </VeltNotificationsPanelWireframe.Settings.List.Accordion>
</VeltWireframe>

​
Accordion Trigger

  • React / Next.js
  • Other Frameworks
<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

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Label />
</VeltWireframe>

​
Accordion Trigger SelectedValue

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.SelectedValue />
</VeltWireframe>

​
Accordion Trigger Icon

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Icon />
</VeltWireframe>

​
Accordion Content

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item />
    </VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
</VeltWireframe>

​
Accordion Content Item

  • React / Next.js
  • Other Frameworks
<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

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Icon />
</VeltWireframe>

​
Accordion Content Item Label

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Label />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Footer>
        <VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
        <VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
        <VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
    </VeltNotificationsPanelWireframe.Settings.Footer>
</VeltWireframe>

​
MuteAllTitle

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
</VeltWireframe>

​
MuteAllDescription

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
</VeltWireframe>

​
MuteAllToggle

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
</VeltWireframe>

​
Shared Components

​
Content List

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List>
        <VeltNotificationsPanelWireframe.Content.List.Item />
    </VeltNotificationsPanelWireframe.Content.List>
</VeltWireframe>

​
Content List Item

  • React / Next.js
  • Other Frameworks
<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

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Avatar />
</VeltWireframe>

​
Content List Item Unread

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Unread />
</VeltWireframe>

​
Content List Item Headline

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Headline />
</VeltWireframe>

​
Content List Item Body

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Body />
</VeltWireframe>

​
Content List Item FileName

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.FileName />
</VeltWireframe>

​
Content List Item Time

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Time />
</VeltWireframe>

​
LoadMore

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.LoadMore />
</VeltWireframe>

​
AllReadContainer

  • React / Next.js
  • Other Frameworks
<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
  • React / Next.js
  • Other Frameworks
<VeltNotificationsPanel shadowDom={false} />

​
Dark Mode

Default: false
  • React / Next.js
  • Other Frameworks
<VeltNotificationsPanel darkMode={true} />
⌘I