> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Notifications Panel Primitives

> Primitive components for building custom Notifications panel interfaces.

## 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]`).

## Common Inputs

All Notifications primitive components accept the following inputs. See [`NotificationsPrimitiveCommonProps`](/api-reference/sdk/models/data-models#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

### VeltNotificationsToolIcon

Icon displayed in the notifications tool trigger button.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsToolIcon />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-tool-icon></velt-notifications-tool-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsToolUnreadIcon

Icon shown in the notifications tool trigger when there are unread notifications.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsToolUnreadIcon />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-tool-unread-icon></velt-notifications-tool-unread-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsToolLabel

Text label displayed in the notifications tool trigger button.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsToolLabel />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-tool-label></velt-notifications-tool-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsToolUnreadCount

Badge showing the count of unread notifications on the tool trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsToolUnreadCount />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-tool-unread-count></velt-notifications-tool-unread-count>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelTitle

Title container at the top of the notifications panel.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelTitle />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-title></velt-notifications-panel-title>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelTitleText

Text displayed inside the notifications panel title.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelTitleText />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-title-text></velt-notifications-panel-title-text>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelHeader

Header bar of the notifications panel containing tabs and action buttons.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelHeader />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-header></velt-notifications-panel-header>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelHeaderTabForYou

Tab in the panel header that filters notifications addressed to the current user.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelHeaderTabForYou />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-header-tab-for-you></velt-notifications-panel-header-tab-for-you>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelHeaderTabPeople

Tab in the panel header that groups notifications by people.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelHeaderTabPeople />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-header-tab-people></velt-notifications-panel-header-tab-people>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelHeaderTabDocuments

Tab in the panel header that groups notifications by document.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelHeaderTabDocuments />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-header-tab-documents></velt-notifications-panel-header-tab-documents>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelHeaderTabAll

Tab in the panel header that shows all notifications.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelHeaderTabAll />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-header-tab-all></velt-notifications-panel-header-tab-all>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContent

Main content area of the notifications panel that renders the active tab's view.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContent />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content></velt-notifications-panel-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentForYou

Content view for the "For You" tab listing notifications directed at the current user.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentForYou />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-for-you></velt-notifications-panel-content-for-you>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentAll

Content view for the "All" tab showing every notification.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentAll />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-all></velt-notifications-panel-content-all>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentAllList

Scrollable list of all notifications inside the "All" content view. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentAllListItem` rendered inside it.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentAllList />
    ```

    **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:

    | Prop               | Type          | Description                                        |
    | ------------------ | ------------- | -------------------------------------------------- |
    | `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-all-list></velt-notifications-panel-content-all-list>
    ```

    **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:

    | Attribute            | Type          | Description                                        |
    | -------------------- | ------------- | -------------------------------------------------- |
    | `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. |
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentAllListItem

A single notification row inside the "All" list. Supports `[listItemTemplate]` for custom row templates.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentAllListItem />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-all-list-item></velt-notifications-panel-content-all-list-item>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentAllListItemLabel

Label displayed on a notification row in the "All" list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentAllListItemLabel />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-all-list-item-label></velt-notifications-panel-content-all-list-item-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentAllListItemContent

Content body of a single notification row in the "All" list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentAllListItemContent />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-all-list-item-content></velt-notifications-panel-content-all-list-item-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentAllReadContainer

Container that groups already-read notifications in the "All" view.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentAllReadContainer />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-all-read-container></velt-notifications-panel-content-all-read-container>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentPeople

Content view for the "People" tab grouping notifications by sender.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentPeople />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-people></velt-notifications-panel-content-people>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentPeopleList

Scrollable list of people groups inside the "People" content view. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentPeopleListItem` rendered inside it.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentPeopleList />
    ```

    **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:

    | Prop               | Type          | Description                                        |
    | ------------------ | ------------- | -------------------------------------------------- |
    | `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-people-list></velt-notifications-panel-content-people-list>
    ```

    **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:

    | Attribute            | Type          | Description                                        |
    | -------------------- | ------------- | -------------------------------------------------- |
    | `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. |
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentPeopleListItem

A single person group row in the "People" list. Supports `[listItemTemplate]` for custom row templates.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentPeopleListItem />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-people-list-item></velt-notifications-panel-content-people-list-item>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentPeopleListItemAvatar

Avatar image for a person in the "People" list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentPeopleListItemAvatar />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-people-list-item-avatar></velt-notifications-panel-content-people-list-item-avatar>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentPeopleListItemName

Display name for a person in the "People" list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentPeopleListItemName />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-people-list-item-name></velt-notifications-panel-content-people-list-item-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentPeopleListItemCount

Unread notification count badge for a person in the "People" list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentPeopleListItemCount />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-people-list-item-count></velt-notifications-panel-content-people-list-item-count>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentPeopleListItemContent

Expanded notification content displayed under a person row in the "People" list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentPeopleListItemContent />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-people-list-item-content></velt-notifications-panel-content-people-list-item-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentDocuments

Content view for the "Documents" tab grouping notifications by document.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentDocuments />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-documents></velt-notifications-panel-content-documents>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentDocumentsList

Scrollable list of document groups inside the "Documents" content view. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentDocumentsListItem` rendered inside it.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentDocumentsList />
    ```

    **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:

    | Prop               | Type          | Description                                        |
    | ------------------ | ------------- | -------------------------------------------------- |
    | `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-documents-list></velt-notifications-panel-content-documents-list>
    ```

    **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:

    | Attribute            | Type          | Description                                        |
    | -------------------- | ------------- | -------------------------------------------------- |
    | `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. |
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentDocumentsListItem

A single document group row in the "Documents" list. Supports `[listItemTemplate]` for custom row templates.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentDocumentsListItem />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-documents-list-item></velt-notifications-panel-content-documents-list-item>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentDocumentsListItemName

Document name displayed in a "Documents" list row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentDocumentsListItemName />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-documents-list-item-name></velt-notifications-panel-content-documents-list-item-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentDocumentsListItemCount

Unread notification count badge for a document in the "Documents" list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentDocumentsListItemCount />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-documents-list-item-count></velt-notifications-panel-content-documents-list-item-count>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentDocumentsListItemContent

Expanded notification content displayed under a document row in the "Documents" list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentDocumentsListItemContent />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-documents-list-item-content></velt-notifications-panel-content-documents-list-item-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentDocumentsListItemUnread

Unread indicator shown on a document row in the "Documents" list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentDocumentsListItemUnread />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-documents-list-item-unread></velt-notifications-panel-content-documents-list-item-unread>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentList

Generic scrollable notification list used across multiple tab views. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentListItem` rendered inside it.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentList />
    ```

    **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:

    | Prop               | Type          | Description                                        |
    | ------------------ | ------------- | -------------------------------------------------- |
    | `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-list></velt-notifications-panel-content-list>
    ```

    **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:

    | Attribute            | Type          | Description                                        |
    | -------------------- | ------------- | -------------------------------------------------- |
    | `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. |
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentListItem

A single row in the generic notification list. Supports `[listItemTemplate]` for custom row templates.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentListItem />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-list-item></velt-notifications-panel-content-list-item>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentListItemAvatar

User avatar displayed on a notification list row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentListItemAvatar />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-list-item-avatar></velt-notifications-panel-content-list-item-avatar>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentListItemUnread

Unread dot indicator on a notification list row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentListItemUnread />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-list-item-unread></velt-notifications-panel-content-list-item-unread>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentListItemHeadline

Primary headline text of a notification list row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentListItemHeadline />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-list-item-headline></velt-notifications-panel-content-list-item-headline>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentListItemBody

Body text beneath the headline on a notification list row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentListItemBody />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-list-item-body></velt-notifications-panel-content-list-item-body>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentListItemFileName

File or document name displayed on a notification list row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentListItemFileName />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-list-item-file-name></velt-notifications-panel-content-list-item-file-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentListItemTime

Relative or absolute timestamp on a notification list row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentListItemTime />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-list-item-time></velt-notifications-panel-content-list-item-time>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelContentLoadMore

Button to load additional notifications beyond the initial set.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelContentLoadMore />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-content-load-more></velt-notifications-panel-content-load-more>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelCloseButton

Button that closes the notifications panel.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelCloseButton />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-close-button></velt-notifications-panel-close-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelReadAllButton

Button that marks all notifications as read.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelReadAllButton />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-read-all-button></velt-notifications-panel-read-all-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelViewAllButton

Button that navigates to a full notifications view.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelViewAllButton />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-view-all-button></velt-notifications-panel-view-all-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSkeleton

Loading skeleton displayed while notification data is being fetched.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSkeleton />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-skeleton></velt-notifications-panel-skeleton>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsButton

Button that opens the notifications settings panel.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsButton />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-button></velt-notifications-panel-settings-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettings

Container for the notifications settings view.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettings />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings></velt-notifications-panel-settings>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsHeader

Header bar of the notifications settings view.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsHeader />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-header></velt-notifications-panel-settings-header>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsHeaderTitle

Title text displayed in the notifications settings header.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsHeaderTitle />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-header-title></velt-notifications-panel-settings-header-title>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsTitle

Section title within the notifications settings view.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsTitle />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-title></velt-notifications-panel-settings-title>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsDescription

Descriptive text for a settings section.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsDescription />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-description></velt-notifications-panel-settings-description>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsList

List container for notification settings items.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsList />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-list></velt-notifications-panel-settings-list>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsMuteAllTitle

Title label for the mute-all notifications toggle row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsMuteAllTitle />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-mute-all-title></velt-notifications-panel-settings-mute-all-title>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsMuteAllDescription

Description text for the mute-all notifications toggle row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsMuteAllDescription />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-mute-all-description></velt-notifications-panel-settings-mute-all-description>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsMuteAllToggle

Toggle switch that mutes all notifications.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsMuteAllToggle />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-mute-all-toggle></velt-notifications-panel-settings-mute-all-toggle>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsAccordion

Accordion container for grouped notification settings options. Forwards `[itemTemplate]` to each `VeltNotificationsPanelSettingsAccordionContentItem` and `[triggerTemplate]` to each `VeltNotificationsPanelSettingsAccordionTrigger` rendered inside it.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsAccordion />
    ```

    **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:

    | Prop              | Type          | Description                                                     |
    | ----------------- | ------------- | --------------------------------------------------------------- |
    | `itemTemplate`    | `TemplateRef` | Custom template forwarded to each accordion content item child. |
    | `triggerTemplate` | `TemplateRef` | Custom template forwarded to each accordion trigger child.      |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-accordion></velt-notifications-panel-settings-accordion>
    ```

    **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:

    | 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.      |
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsAccordionTrigger

Clickable trigger row that expands or collapses a settings accordion section.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsAccordionTrigger />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-accordion-trigger></velt-notifications-panel-settings-accordion-trigger>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsAccordionTriggerLabel

Label text displayed on a settings accordion trigger row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsAccordionTriggerLabel />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-accordion-trigger-label></velt-notifications-panel-settings-accordion-trigger-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsAccordionTriggerIcon

Icon displayed on a settings accordion trigger row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsAccordionTriggerIcon />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-accordion-trigger-icon></velt-notifications-panel-settings-accordion-trigger-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsAccordionTriggerSelectedValue

Displays the currently selected value on a settings accordion trigger row.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsAccordionTriggerSelectedValue />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-accordion-trigger-selected-value></velt-notifications-panel-settings-accordion-trigger-selected-value>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsAccordionContent

Expanded content area of a settings accordion section.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsAccordionContent />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-accordion-content></velt-notifications-panel-settings-accordion-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsAccordionContentItem

A single selectable option inside an expanded settings accordion. Supports `[itemTemplate]` for custom option templates.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsAccordionContentItem />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-accordion-content-item></velt-notifications-panel-settings-accordion-content-item>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsAccordionContentItemLabel

Label text for a settings accordion content option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsAccordionContentItemLabel />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-accordion-content-item-label></velt-notifications-panel-settings-accordion-content-item-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsAccordionContentItemIcon

Icon for a settings accordion content option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsAccordionContentItemIcon />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-accordion-content-item-icon></velt-notifications-panel-settings-accordion-content-item-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsBackButton

Button that navigates back from the settings view to the main notifications panel.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsBackButton />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-back-button></velt-notifications-panel-settings-back-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsPanelSettingsFooter

Footer area of the notifications settings view.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsPanelSettingsFooter />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-panel-settings-footer></velt-notifications-panel-settings-footer>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>