Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The Notifications Primitives API provides granular components that can be used independently to build fully custom notification tool and panel interfaces. All primitives share a common set of inputs documented below; list-type primitives additionally support template forwarding via slot attributes ([listItemTemplate], [itemTemplate], [triggerTemplate]).
All Notifications primitive components accept the following inputs. See NotificationsPrimitiveCommonProps for the full type definition.
| React Prop | HTML Attribute | Type | Default | Description |
|---|
variant | variant | string | — | Visual variant for the component. |
darkMode | dark-mode | boolean | false | Enables dark mode rendering. |
shadowDom | shadow-dom | boolean | false | Renders the component inside a Shadow DOM. |
parentLocalUIState | parent-local-ui-state | object | — | Local UI state passed down from a parent primitive. |
Components
Icon displayed in the notifications tool trigger button.
React / Next.js
Other Frameworks
<VeltNotificationsToolIcon />
<velt-notifications-tool-icon></velt-notifications-tool-icon>
Icon shown in the notifications tool trigger when there are unread notifications.
React / Next.js
Other Frameworks
<VeltNotificationsToolUnreadIcon />
<velt-notifications-tool-unread-icon></velt-notifications-tool-unread-icon>
Text label displayed in the notifications tool trigger button.
React / Next.js
Other Frameworks
<VeltNotificationsToolLabel />
<velt-notifications-tool-label></velt-notifications-tool-label>
Badge showing the count of unread notifications on the tool trigger.
React / Next.js
Other Frameworks
<VeltNotificationsToolUnreadCount />
<velt-notifications-tool-unread-count></velt-notifications-tool-unread-count>
VeltNotificationsPanelTitle
Title container at the top of the notifications panel.
React / Next.js
Other Frameworks
<VeltNotificationsPanelTitle />
<velt-notifications-panel-title></velt-notifications-panel-title>
VeltNotificationsPanelTitleText
Text displayed inside the notifications panel title.
React / Next.js
Other Frameworks
<VeltNotificationsPanelTitleText />
<velt-notifications-panel-title-text></velt-notifications-panel-title-text>
Header bar of the notifications panel containing tabs and action buttons.
React / Next.js
Other Frameworks
<VeltNotificationsPanelHeader />
<velt-notifications-panel-header></velt-notifications-panel-header>
Tab in the panel header that filters notifications addressed to the current user.
React / Next.js
Other Frameworks
<VeltNotificationsPanelHeaderTabForYou />
<velt-notifications-panel-header-tab-for-you></velt-notifications-panel-header-tab-for-you>
Tab in the panel header that groups notifications by people.
React / Next.js
Other Frameworks
<VeltNotificationsPanelHeaderTabPeople />
<velt-notifications-panel-header-tab-people></velt-notifications-panel-header-tab-people>
Tab in the panel header that groups notifications by document.
React / Next.js
Other Frameworks
<VeltNotificationsPanelHeaderTabDocuments />
<velt-notifications-panel-header-tab-documents></velt-notifications-panel-header-tab-documents>
Tab in the panel header that shows all notifications.
React / Next.js
Other Frameworks
<VeltNotificationsPanelHeaderTabAll />
<velt-notifications-panel-header-tab-all></velt-notifications-panel-header-tab-all>
VeltNotificationsPanelContent
Main content area of the notifications panel that renders the active tab’s view.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContent />
<velt-notifications-panel-content></velt-notifications-panel-content>
VeltNotificationsPanelContentForYou
Content view for the “For You” tab listing notifications directed at the current user.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentForYou />
<velt-notifications-panel-content-for-you></velt-notifications-panel-content-for-you>
VeltNotificationsPanelContentAll
Content view for the “All” tab showing every notification.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentAll />
<velt-notifications-panel-content-all></velt-notifications-panel-content-all>
VeltNotificationsPanelContentAllList
Scrollable list of all notifications inside the “All” content view. Forwards [listItemTemplate] to each VeltNotificationsPanelContentAllListItem rendered inside it.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentAllList />
| Prop | Type | Description |
|---|
listItemTemplate | TemplateRef | Custom template forwarded to each list item child. |
<velt-notifications-panel-content-all-list></velt-notifications-panel-content-all-list>
| Attribute | Type | Description |
|---|
list-item-template | TemplateRef | Custom template forwarded to each list item child. |
VeltNotificationsPanelContentAllListItem
A single notification row inside the “All” list. Supports [listItemTemplate] for custom row templates.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentAllListItem />
<velt-notifications-panel-content-all-list-item></velt-notifications-panel-content-all-list-item>
VeltNotificationsPanelContentAllListItemLabel
Label displayed on a notification row in the “All” list.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentAllListItemLabel />
<velt-notifications-panel-content-all-list-item-label></velt-notifications-panel-content-all-list-item-label>
VeltNotificationsPanelContentAllListItemContent
Content body of a single notification row in the “All” list.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentAllListItemContent />
<velt-notifications-panel-content-all-list-item-content></velt-notifications-panel-content-all-list-item-content>
VeltNotificationsPanelContentAllReadContainer
Container that groups already-read notifications in the “All” view.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentAllReadContainer />
<velt-notifications-panel-content-all-read-container></velt-notifications-panel-content-all-read-container>
VeltNotificationsPanelContentPeople
Content view for the “People” tab grouping notifications by sender.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentPeople />
<velt-notifications-panel-content-people></velt-notifications-panel-content-people>
VeltNotificationsPanelContentPeopleList
Scrollable list of people groups inside the “People” content view. Forwards [listItemTemplate] to each VeltNotificationsPanelContentPeopleListItem rendered inside it.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentPeopleList />
| Prop | Type | Description |
|---|
listItemTemplate | TemplateRef | Custom template forwarded to each list item child. |
<velt-notifications-panel-content-people-list></velt-notifications-panel-content-people-list>
| Attribute | Type | Description |
|---|
list-item-template | TemplateRef | Custom template forwarded to each list item child. |
VeltNotificationsPanelContentPeopleListItem
A single person group row in the “People” list. Supports [listItemTemplate] for custom row templates.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentPeopleListItem />
<velt-notifications-panel-content-people-list-item></velt-notifications-panel-content-people-list-item>
VeltNotificationsPanelContentPeopleListItemAvatar
Avatar image for a person in the “People” list.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentPeopleListItemAvatar />
<velt-notifications-panel-content-people-list-item-avatar></velt-notifications-panel-content-people-list-item-avatar>
VeltNotificationsPanelContentPeopleListItemName
Display name for a person in the “People” list.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentPeopleListItemName />
<velt-notifications-panel-content-people-list-item-name></velt-notifications-panel-content-people-list-item-name>
VeltNotificationsPanelContentPeopleListItemCount
Unread notification count badge for a person in the “People” list.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentPeopleListItemCount />
<velt-notifications-panel-content-people-list-item-count></velt-notifications-panel-content-people-list-item-count>
VeltNotificationsPanelContentPeopleListItemContent
Expanded notification content displayed under a person row in the “People” list.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentPeopleListItemContent />
<velt-notifications-panel-content-people-list-item-content></velt-notifications-panel-content-people-list-item-content>
VeltNotificationsPanelContentDocuments
Content view for the “Documents” tab grouping notifications by document.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentDocuments />
<velt-notifications-panel-content-documents></velt-notifications-panel-content-documents>
VeltNotificationsPanelContentDocumentsList
Scrollable list of document groups inside the “Documents” content view. Forwards [listItemTemplate] to each VeltNotificationsPanelContentDocumentsListItem rendered inside it.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentDocumentsList />
| Prop | Type | Description |
|---|
listItemTemplate | TemplateRef | Custom template forwarded to each list item child. |
<velt-notifications-panel-content-documents-list></velt-notifications-panel-content-documents-list>
| Attribute | Type | Description |
|---|
list-item-template | TemplateRef | Custom template forwarded to each list item child. |
VeltNotificationsPanelContentDocumentsListItem
A single document group row in the “Documents” list. Supports [listItemTemplate] for custom row templates.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentDocumentsListItem />
<velt-notifications-panel-content-documents-list-item></velt-notifications-panel-content-documents-list-item>
VeltNotificationsPanelContentDocumentsListItemName
Document name displayed in a “Documents” list row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentDocumentsListItemName />
<velt-notifications-panel-content-documents-list-item-name></velt-notifications-panel-content-documents-list-item-name>
VeltNotificationsPanelContentDocumentsListItemCount
Unread notification count badge for a document in the “Documents” list.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentDocumentsListItemCount />
<velt-notifications-panel-content-documents-list-item-count></velt-notifications-panel-content-documents-list-item-count>
VeltNotificationsPanelContentDocumentsListItemContent
Expanded notification content displayed under a document row in the “Documents” list.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentDocumentsListItemContent />
<velt-notifications-panel-content-documents-list-item-content></velt-notifications-panel-content-documents-list-item-content>
VeltNotificationsPanelContentDocumentsListItemUnread
Unread indicator shown on a document row in the “Documents” list.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentDocumentsListItemUnread />
<velt-notifications-panel-content-documents-list-item-unread></velt-notifications-panel-content-documents-list-item-unread>
VeltNotificationsPanelContentList
Generic scrollable notification list used across multiple tab views. Forwards [listItemTemplate] to each VeltNotificationsPanelContentListItem rendered inside it.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentList />
| Prop | Type | Description |
|---|
listItemTemplate | TemplateRef | Custom template forwarded to each list item child. |
<velt-notifications-panel-content-list></velt-notifications-panel-content-list>
| Attribute | Type | Description |
|---|
list-item-template | TemplateRef | Custom template forwarded to each list item child. |
VeltNotificationsPanelContentListItem
A single row in the generic notification list. Supports [listItemTemplate] for custom row templates.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentListItem />
<velt-notifications-panel-content-list-item></velt-notifications-panel-content-list-item>
VeltNotificationsPanelContentListItemAvatar
User avatar displayed on a notification list row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentListItemAvatar />
<velt-notifications-panel-content-list-item-avatar></velt-notifications-panel-content-list-item-avatar>
VeltNotificationsPanelContentListItemUnread
Unread dot indicator on a notification list row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentListItemUnread />
<velt-notifications-panel-content-list-item-unread></velt-notifications-panel-content-list-item-unread>
VeltNotificationsPanelContentListItemHeadline
Primary headline text of a notification list row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentListItemHeadline />
<velt-notifications-panel-content-list-item-headline></velt-notifications-panel-content-list-item-headline>
VeltNotificationsPanelContentListItemBody
Body text beneath the headline on a notification list row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentListItemBody />
<velt-notifications-panel-content-list-item-body></velt-notifications-panel-content-list-item-body>
VeltNotificationsPanelContentListItemFileName
File or document name displayed on a notification list row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentListItemFileName />
<velt-notifications-panel-content-list-item-file-name></velt-notifications-panel-content-list-item-file-name>
VeltNotificationsPanelContentListItemTime
Relative or absolute timestamp on a notification list row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentListItemTime />
<velt-notifications-panel-content-list-item-time></velt-notifications-panel-content-list-item-time>
VeltNotificationsPanelContentLoadMore
Button to load additional notifications beyond the initial set.
React / Next.js
Other Frameworks
<VeltNotificationsPanelContentLoadMore />
<velt-notifications-panel-content-load-more></velt-notifications-panel-content-load-more>
Button that closes the notifications panel.
React / Next.js
Other Frameworks
<VeltNotificationsPanelCloseButton />
<velt-notifications-panel-close-button></velt-notifications-panel-close-button>
Button that marks all notifications as read.
React / Next.js
Other Frameworks
<VeltNotificationsPanelReadAllButton />
<velt-notifications-panel-read-all-button></velt-notifications-panel-read-all-button>
Button that navigates to a full notifications view.
React / Next.js
Other Frameworks
<VeltNotificationsPanelViewAllButton />
<velt-notifications-panel-view-all-button></velt-notifications-panel-view-all-button>
VeltNotificationsPanelSkeleton
Loading skeleton displayed while notification data is being fetched.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSkeleton />
<velt-notifications-panel-skeleton></velt-notifications-panel-skeleton>
Button that opens the notifications settings panel.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsButton />
<velt-notifications-panel-settings-button></velt-notifications-panel-settings-button>
VeltNotificationsPanelSettings
Container for the notifications settings view.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettings />
<velt-notifications-panel-settings></velt-notifications-panel-settings>
Header bar of the notifications settings view.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsHeader />
<velt-notifications-panel-settings-header></velt-notifications-panel-settings-header>
Title text displayed in the notifications settings header.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsHeaderTitle />
<velt-notifications-panel-settings-header-title></velt-notifications-panel-settings-header-title>
VeltNotificationsPanelSettingsTitle
Section title within the notifications settings view.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsTitle />
<velt-notifications-panel-settings-title></velt-notifications-panel-settings-title>
VeltNotificationsPanelSettingsDescription
Descriptive text for a settings section.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsDescription />
<velt-notifications-panel-settings-description></velt-notifications-panel-settings-description>
VeltNotificationsPanelSettingsList
List container for notification settings items.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsList />
<velt-notifications-panel-settings-list></velt-notifications-panel-settings-list>
VeltNotificationsPanelSettingsMuteAllTitle
Title label for the mute-all notifications toggle row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsMuteAllTitle />
<velt-notifications-panel-settings-mute-all-title></velt-notifications-panel-settings-mute-all-title>
VeltNotificationsPanelSettingsMuteAllDescription
Description text for the mute-all notifications toggle row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsMuteAllDescription />
<velt-notifications-panel-settings-mute-all-description></velt-notifications-panel-settings-mute-all-description>
VeltNotificationsPanelSettingsMuteAllToggle
Toggle switch that mutes all notifications.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsMuteAllToggle />
<velt-notifications-panel-settings-mute-all-toggle></velt-notifications-panel-settings-mute-all-toggle>
VeltNotificationsPanelSettingsAccordion
Accordion container for grouped notification settings options. Forwards [itemTemplate] to each VeltNotificationsPanelSettingsAccordionContentItem and [triggerTemplate] to each VeltNotificationsPanelSettingsAccordionTrigger rendered inside it.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsAccordion />
| Prop | Type | Description |
|---|
itemTemplate | TemplateRef | Custom template forwarded to each accordion content item child. |
triggerTemplate | TemplateRef | Custom template forwarded to each accordion trigger child. |
<velt-notifications-panel-settings-accordion></velt-notifications-panel-settings-accordion>
| Attribute | Type | Description |
|---|
item-template | TemplateRef | Custom template forwarded to each accordion content item child. |
trigger-template | TemplateRef | Custom template forwarded to each accordion trigger child. |
VeltNotificationsPanelSettingsAccordionTrigger
Clickable trigger row that expands or collapses a settings accordion section.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsAccordionTrigger />
<velt-notifications-panel-settings-accordion-trigger></velt-notifications-panel-settings-accordion-trigger>
VeltNotificationsPanelSettingsAccordionTriggerLabel
Label text displayed on a settings accordion trigger row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsAccordionTriggerLabel />
<velt-notifications-panel-settings-accordion-trigger-label></velt-notifications-panel-settings-accordion-trigger-label>
VeltNotificationsPanelSettingsAccordionTriggerIcon
Icon displayed on a settings accordion trigger row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsAccordionTriggerIcon />
<velt-notifications-panel-settings-accordion-trigger-icon></velt-notifications-panel-settings-accordion-trigger-icon>
VeltNotificationsPanelSettingsAccordionTriggerSelectedValue
Displays the currently selected value on a settings accordion trigger row.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsAccordionTriggerSelectedValue />
<velt-notifications-panel-settings-accordion-trigger-selected-value></velt-notifications-panel-settings-accordion-trigger-selected-value>
VeltNotificationsPanelSettingsAccordionContent
Expanded content area of a settings accordion section.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsAccordionContent />
<velt-notifications-panel-settings-accordion-content></velt-notifications-panel-settings-accordion-content>
VeltNotificationsPanelSettingsAccordionContentItem
A single selectable option inside an expanded settings accordion. Supports [itemTemplate] for custom option templates.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsAccordionContentItem />
<velt-notifications-panel-settings-accordion-content-item></velt-notifications-panel-settings-accordion-content-item>
VeltNotificationsPanelSettingsAccordionContentItemLabel
Label text for a settings accordion content option.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsAccordionContentItemLabel />
<velt-notifications-panel-settings-accordion-content-item-label></velt-notifications-panel-settings-accordion-content-item-label>
VeltNotificationsPanelSettingsAccordionContentItemIcon
Icon for a settings accordion content option.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsAccordionContentItemIcon />
<velt-notifications-panel-settings-accordion-content-item-icon></velt-notifications-panel-settings-accordion-content-item-icon>
Button that navigates back from the settings view to the main notifications panel.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsBackButton />
<velt-notifications-panel-settings-back-button></velt-notifications-panel-settings-back-button>
Footer area of the notifications settings view.
React / Next.js
Other Frameworks
<VeltNotificationsPanelSettingsFooter />
<velt-notifications-panel-settings-footer></velt-notifications-panel-settings-footer>
