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

# Component catalog

> Map Velt comment surfaces to primitives, wireframes, props, feature flags, variables, and references.

> [!NOTE]
>
> This list is generated from the Velt SDK and is complete for what it covers: a name that isn't listed here (or in the linked companion references) doesn't exist; don't guess names. Comments are mapped exhaustively (primitive ↔ wireframe); other features are summarized at the end.

Maps each comment surface to its **primitive** component and its **wireframe** family: a quick orientation. Comments are covered in depth; other features are summarized at the end (see [`Other features`](https://velt.dev/docs/ui-customization/customize-by-feature)).

> **Companion references (use these for the complete data):**
>
> * [`Wireframe components`](https://velt.dev/docs/ui-customization/reference/wireframe-components): all **82** wireframe components + **full** slot trees + slot input props.
> * [`Primitives`](https://velt.dev/docs/ui-customization/reference/primitives): all **491** primitive components (incl. every sub-component).
> * [`Layout config`](https://velt.dev/docs/ui-customization/reference/props#part-3-layout-config-and-custom-data): layout/mode **props** (filter layout, embed mode, panel mode, …).
> * [`CSS classes`](https://velt.dev/docs/ui-customization/reference/css-classes): structural + stateful **CSS classes**.
> * [`Template Variables`](https://velt.dev/docs/ui-customization/template-variables): the `{variable}` catalog.

The slot trees on this page are an orientation overview; the **complete** trees + slot props live in [`Wireframe components`](https://velt.dev/docs/ui-customization/reference/wireframe-components). Don't invent names.

***

## Comments: primitives ↔ wireframes

| Surface | Primitive component | Wireframe component |
| - | - | - |
| Comments host (pins on page) | `VeltComments` | (uses dialog/pin/bubble wireframes) |
| Comment dialog (a thread) | `VeltCommentDialog` | `VeltCommentDialogWireframe` |
| Single thread (standalone) | `VeltCommentDialog` *(use this)* · ~~`VeltCommentThread`~~ **(deprecated)** | `VeltCommentDialogWireframe` |
| Comments sidebar | `VeltCommentsSidebar` | `VeltCommentsSidebarWireframe` |
| Comments sidebar (V2) | `VeltCommentsSidebarV2` | `VeltCommentsSidebarV2Wireframe` |
| Sidebar toggle button | `VeltSidebarButton` / `VeltCommentsSidebarButton` | `VeltSidebarButtonWireframe` / `VeltCommentsSidebarButtonWireframe` |
| Comment pin | `VeltCommentPin` | `VeltCommentPinWireframe` |
| Comment bubble | `VeltCommentBubble` | `VeltCommentBubbleWireframe` |
| Composer (standalone) | `VeltCommentComposer` | `VeltCommentComposerWireframe` |
| Multi-thread dialog | `VeltMultiThreadCommentDialog` | `VeltMultiThreadCommentDialogWireframe` |
| Inline comments section | `VeltInlineCommentsSection` | `VeltInlineCommentsSectionWireframe` |
| Text comment (tool) | `VeltTextComment` | `VeltTextCommentToolbarWireframe` / `VeltTextCommentToolWireframe` |
| Text comment thread (inline render) | `VeltCommentText` *(renders `velt-comment-text`; distinct from `VeltTextComment` the tool)* | (no wireframe: props + CSS) |
| Canvas comment (anchored to canvas coord) | `VeltCanvasComment` *(`canvasId`, `position`)* | (no wireframe: props + CSS) |
| Chart comment (anchored to data point) | `VeltChartComment` | (no wireframe: props + CSS) |
| Highcharts comments (integration) | `VeltHighChartComments` *(maps Highcharts points → `VeltChartComment`)* | None |
| Nivo chart comments (integration) | `VeltNivoChartComments` *(maps Nivo points → `VeltChartComment`)* | None |
| Comments minimap | `VeltCommentsMinimap` | (no wireframe: props + CSS) |
| Generic action button (in wireframes) | None | `VeltButtonWireframe` |

Dialog dropdown sub-wireframes also exist: `VeltCommentDialogOptionsDropdownTriggerWireframe` / `…ContentWireframe`, and the same for `Status` and `Priority` dropdowns.

> **`Snippyly*` names are the legacy pre-"Velt" brand.** Internally the SDK still defines components under `Snippyly*` directory/identifier names (`SnippylyComments`, `SnippylyCommentTool`, `SnippylyPresence`, …): Snippyly was Velt's former product name. The package re-exports each one **only** under its `Velt*` name; there are **no public `Snippyly*` exports** to import. Always use the `Velt*` equivalent (`SnippylyComments` → `VeltComments`, `SnippylyCommentTool` → `VeltCommentTool`, …).

***

## Surface lookup: props · flags · variables · refs (the one-stop map)

One entry per surface, so you can resolve everything for a surface from a single place. Each row lists:

* The **primitive** and the **root wireframe** (registering the root is what turns shadow DOM off for that surface: see [`CSS`](https://velt.dev/docs/ui-customization/styling#make-your-css-reach-velt) and the [decision tree](https://velt.dev/docs/ui-customization/decision-tree.md)).
* The **key props** a customization typically sets.
* The **off-by-default flags** to enable if the design shows them.
* The **key `{variables}`** for dynamic markup.

These are the *common* identifiers. The **exhaustive** lists are [`Props`](https://velt.dev/docs/ui-customization/reference/props), [`Feature flags`](https://velt.dev/docs/ui-customization/reference/feature-flags), and [`Template Variables`](https://velt.dev/docs/ui-customization/template-variables); slot trees are [`Wireframe components`](https://velt.dev/docs/ui-customization/reference/wireframe-components). Never use a name that isn't in those.

> [!NOTE]
>
> **Root-wireframe note:** each surface's top-level `Velt…Wireframe` below is its **root**: registering it removes that surface's own shadow DOM (class CSS reaches it). The dialog and pin cases are documented in detail in [`Wireframe components`](https://velt.dev/docs/ui-customization/reference/wireframe-components). Nested/leaf-only wireframes don't remove shadow: set `shadowDom={false}` there.

### Comments

| Surface | Primitive · Root wireframe | Key props | Off-by-default flags | Key variables |
| - | - | - | - | - |
| Comment dialog (a thread) | `VeltCommentDialog` · `VeltCommentDialogWireframe` *(root: shadow auto-off)* | `annotationId`, `variant`, `commentPinType`, `readOnly`, `messageTruncation`, `fullExpanded` | `priority`, `replyAvatars`, `commentIndex`, `sidebarButtonOnCommentDialog`, `formatOptions` | `{annotation.status.id}` (`OPEN`/`IN_PROGRESS`/`RESOLVED`), `{annotation.priority.id}`, `{annotation.comments.length}`, `{annotation.unreadCount}`, `{annotation.assignedTo}` |
| Comment pin | `VeltCommentPin` · `VeltCommentPinWireframe` *(root: replaces the whole pin)* | `annotationId`, `variant`, `context`, `locationId` | `commentIndex` (the on-pin number), `deviceInfo`, `commentPinHighlighter` | `{annotation.status.id}`, `{annotation.annotationIndex}`, `{annotation.annotationNumber}`, `{annotation.priority.name}`, `{annotation.unreadCount}` |
| Comment bubble | `VeltCommentBubble` · `VeltCommentBubbleWireframe` | `targetElementId`, `avatar`, `variant`, `commentCountType`, `annotationId`, `context` | `bubbleOnPin` (`bubbleOnPinHover` defaults to true and applies once `bubbleOnPin` is enabled) | `{annotation.status.id}`, `{annotation.comments.length}`, `{annotation.unread}`, `{annotation.unreadCount}` |
| Comments sidebar (V1) | `VeltCommentsSidebar` · `VeltCommentsSidebarWireframe` | `embedMode`, `variant`, `position`, `pageMode`, `filterConfig`, `filterPanelLayout`, `focusedThreadMode`, `readOnly` | None | `{focusedAnnotation}`, `{appliedFiltersCount}`, `{unreadCommentAnnotationCount}`, `{noCommentsFound}` |
| Comments sidebar (V2) | `VeltCommentsSidebarV2` · `VeltCommentsSidebarV2Wireframe` | `embedMode`, `position`, `variant`, `dialogVariant`, `filterPanelLayout`, `pageMode`, `focusedThreadMode`, `darkMode`; filter config: `filters` / `miniFilters` / `minimalFilters`, `filterOperator` ([`Layout config`](https://velt.dev/docs/ui-customization/reference/props#part-3-layout-config-and-custom-data)) | None | `{focusedAnnotation}`, `{appliedFiltersCount}`, `{noCommentsFound}` |
| Sidebar toggle button | `VeltSidebarButton` / `VeltCommentsSidebarButton` · `VeltSidebarButtonWireframe` / `VeltCommentsSidebarButtonWireframe` | `variant`, `position`, `sidebarVariant`, `filterPanelLayout`, `commentCountType`, `sidebarShadowDom`, `pageMode` | None | None |
| Comment tool | `VeltCommentTool` · `VeltCommentToolWireframe` | `targetElementId`, `variant`, `context`, `locationId`, `disabled` | `contextInPageModeComposer` | None |
| Inline comments section | `VeltInlineCommentsSection` · `VeltInlineCommentsSectionWireframe` | `config`, `targetElementId`, `variant`, `dialogVariant`, `composerVariant`, `composerPosition`, `multiThread`, `fullExpanded`, `readOnly` | None | `{annotations}`, `{filterState.filters}`, `{sortState.sortBy}`, `{featureState.readOnly}` |
| Text comment | `VeltTextComment` · `VeltTextCommentToolWireframe` / `VeltTextCommentToolbarWireframe` | `annotationId`, `multiThreadAnnotationId` | None | `{annotation.status.id}`, `{totalComments}`, `{selectedWordsCount}` |
| Multi-thread comment dialog | `VeltMultiThreadCommentDialog` · `VeltMultiThreadCommentDialogWireframe` | `annotationId`, `multiThreadAnnotationId`, `variant`, `commentPinType`, `dialogVariant`, `inboxMode`, `readOnly`, `context` | None | `{filteredAnnotations}`, `{commentPinSelected}`, `{minimalFilter}`, `{noCommentsFound}` |
| Comment composer (standalone) | `VeltCommentComposer` · `VeltCommentComposerWireframe` | `variant`, `dialogVariant`, `context`, `locationId`, `documentId`, `folderId`, `targetComposerElementId`, `placeholder`, `readOnly`, `darkMode` | None | None |
| Comments minimap | `VeltCommentsMinimap` · no wireframe (props + CSS) | `position`, `targetScrollableElementId` | Renders nothing until enabled: `commentElement.enableMinimap()` / `disableMinimap()` (not a JSX flag) | None |

**Gotchas & refs:**

* Comment dialog: `ThreadCard` must nest in `Body → Threads`. See [`Wireframes`](https://velt.dev/docs/ui-customization/layout) and the slot tree below.
* Comment pin: `Index`/`Number` slots are empty containers: print with `<velt-data field="annotation.annotationIndex">`; page-mode comments have no index/number.
* Sidebar (V1): container slots drop undeclared children: declare the full tree.
* Comment tool context: see [`Context`](https://velt.dev/docs/ui-customization/context).

### Notifications

| Surface | Primitive · Root wireframe | Key props | Off-by-default flags | Key variables |
| - | - | - | - | - |
| Notifications panel | `VeltNotificationsPanel` · `VeltNotificationsPanelWireframe` | `tabConfig`, `panelOpenMode`, `settings`, `settingsLayout`, `variant`, `pageSize`, `darkMode`, `shadowDom` | `settings`, `enableSettingsAtOrganizationLevel`, `selfNotifications`, `readNotificationsOnForYouTab`, `enableCrossOrganization`, `enableUserScopedNotifications` | `{selectedTab}`, `{notification}` (`.type`/`.from.name`/`.read`/`.createdAt`/`.documentName`/`.count`), `{unreadNotificationsForYou}`, `{notificationsPanelVisible}` |
| Notifications tool (bell) | `VeltNotificationsTool` · `VeltNotificationsToolWireframe` | `tabConfig`, `panelOpenMode`, `panelVariant`, `settings`, `variant`, `panelShadowDom`, `pageSize`, `darkMode` | None | `{unreadNotificationsForYou}`, `{notification}` (per-item, in the panel) |
| Notifications history | `VeltNotificationsHistoryPanel` · rendered inline (no separate root wireframe) | `embedMode`, `onNotificationClick`, `darkMode` | None | None |
| Notifications bottom sheet (mobile) | Internal container `velt-notifications-bottom-sheet-internal` (no public `Velt*` wrapper); mounts the panel in a `MatBottomSheet` on mobile, reusing `VeltNotificationsPanelWireframe` (`.bottom-sheet` class) | `pageSize` (passed through to the panel) | None | None |

Details for all notification surfaces: [`Notifications`](https://velt.dev/docs/ui-customization/features/notifications).

***

## `VeltCommentDialogWireframe` slot tree

The slots are **static properties** on `VeltCommentDialogWireframe` (and its nested `.ThreadCard` / `.Composer` / `.AssigneeBanner` / options content). They're flat: *you* choose how to arrange them in your layout. Fill the ones you want; the rest fall back to defaults.

This is the **complete top-level set** (the deeper tree is in [`Wireframe components`](https://velt.dev/docs/ui-customization/reference/wireframe-components)):

**`VeltCommentDialogWireframe.*` (top-level slots)**

| Group | Slots |
| - | - |
| Structure | `Header` · `Body` · `Threads` · `ThreadCard` · `Composer` |
| Status & priority | `Status` · `Priority` |
| Header actions | `CopyLink` · `ResolveButton` · `UnresolveButton` · `Options` · `CloseButton` · `NavigationButton` · `Approve` · `DeleteButton` · `AssignMenu` |
| Identity & counts | `CommentIndex` · `CommentNumber` · `CommentCategory` |
| Banners | `VisibilityBanner` · `PrivateBanner` · `GhostBanner` · `AssigneeBanner` |
| Dropdowns | `VisibilityDropdown` · `CustomAnnotationDropdown` |
| Replies | `ToggleReply` · `HideReply` · `MoreReply` · `AllComment` · `ReplyAvatars` |
| Auth / plan states | `SignIn` · `Upgrade` |
| AI suggestions | `AgentSuggestion` · `SuggestionAction` · `CommentSuggestionStatus` |

**`VeltCommentDialogWireframe.ThreadCard.*`**

| Group | Slots |
| - | - |
| Author & meta | `Avatar` · `Name` · `Time` · `Edited` · `Draft` · `Unread` · `DeviceType` |
| Content | `Message` · `Attachments` · `Recordings` |
| Reactions | `Reactions` · `ReactionTool` · `ReactionPin` |
| Actions | `Options` · `AssignButton` · `SeenDropdown` · `Reply` · `EditComposer` |

**Nested slot sets**

| Parent | Slots |
| - | - |
| `VeltCommentDialogWireframe.AssigneeBanner.*` | `UserAvatar` · `UserName` · `ResolveButton` · `UnresolveButton` |
| `VeltCommentDialogWireframe.Composer.*` | `Avatar` · `Input` · `ActionButton` (`type` prop: e.g. `"submit"`, `"attachments"`, `"userMentions"`, and more) |
| `VeltCommentDialogOptionsDropdownContentWireframe.*` | `Edit` · `Delete` · `Assign` · `MakePrivate` · `Notification` · `MarkAsRead` |

> Deeper nesting and each slot's props are in [`Wireframe components`](https://velt.dev/docs/ui-customization/reference/wireframe-components); what each slot *is* is defined in [`Component definitions`](https://velt.dev/docs/ui-customization/reference/component-definitions).

Behavior lives in these slots (resolve, delete, submit, etc.): your markup goes *inside* a slot as its appearance (see the [interactivity rule](https://velt.dev/docs/ui-customization/layout.md#the-interactivity-rule)).

***

## Sidebar slot trees

**`VeltCommentsSidebarWireframe`**: commonly-used slots (the complete set is in [`Wireframe components`](https://velt.dev/docs/ui-customization/reference/wireframe-components)):

```
VeltCommentsSidebarWireframe
├── .Skeleton                         (loading state markup)
└── .Panel
    ├── .MinimalFilterDropdown
    │   ├── .Trigger
    │   └── .Content → .SortDate  .SortUnread  .FilterResolved  .FilterAssignedToMe
    ├── .PageModeComposer             (page-mode composer)
    ├── .EmptyPlaceholder             (often gated with velt-if="{noCommentsFound}")
    └── .List                         (the rendered comment list)
```

**`VeltCommentsSidebarV2Wireframe.*`**: complete top-level slots:

| Group | Slots |
| - | - |
| Structure | `Skeleton` · `Panel` · `Header` · `List` |
| States | `EmptyPlaceholder` · `FocusedThread` |
| Composer | `PageModeComposer` |
| Filters & search | `FilterButton` · `FilterContainer` · `FilterDropdown` · `Search` |
| Header controls | `FullscreenButton` · `CloseButton` |

> The full sidebar slot trees (V1 and V2, including composer attachments image/other → delete/download/loading, thread-card assign-button, reply-avatars, comment-bubble comments-count, …) are in [`Wireframe components`](https://velt.dev/docs/ui-customization/reference/wireframe-components).

***

## How to find the complete slot list for a feature

1. **[`Wireframe components`](https://velt.dev/docs/ui-customization/reference/wireframe-components)**: the full slot tree + slot props for every wireframe.
2. **[`Template Variables`](https://velt.dev/docs/ui-customization/template-variables)**: every `{…}` variable, grouped by feature.
3. To confirm what a specific element renders as, **inspect it** in DevTools (`shadowDom={false}`) and look for `velt-*-wireframe` tags.

***

## Other features (brief)

Each has a primitive + (usually) a wireframe family; see [`Other features`](https://velt.dev/docs/ui-customization/customize-by-feature):

| Feature | Primitive(s) | Wireframe(s) |
| - | - | - |
| Notifications | `VeltNotificationsTool`, `VeltNotificationsPanel`, `VeltNotificationsHistoryPanel` | `VeltNotificationsToolWireframe`, `VeltNotificationsPanelWireframe` (+ `velt-notifications-bottom-sheet-internal` mobile container: internal, no `Velt*` wrapper) |
| Reactions | `VeltReactionTool` | `VeltReactionToolWireframe`, `VeltReactionPinWireframe`, `VeltReactionsPanelWireframe`, `VeltReactionPinTooltipWireframe` |
| Inline reactions section | `VeltInlineReactionsSection` | `VeltInlineReactionsSectionWireframe` |
| Presence | `VeltPresence` | `VeltPresenceWireframe`, `VeltPresenceTooltipWireframe` |
| Cursors | `VeltCursor` | `VeltCursorPointerWireframe` |
| Recorder | `VeltRecorderControlPanel`, `VeltRecorderPlayer`, `VeltRecorderTool`, `VeltRecorderNotes` | `VeltRecorderControlPanelWireframe`, `VeltRecorderPlayerWireframe`, `VeltRecorderPlayerExpandedWireframe`, `VeltRecorderAudioToolWireframe`, `VeltRecorderVideoToolWireframe`, `VeltRecorderScreenToolWireframe`, `VeltRecorderAllToolWireframe`, `VeltRecorderAllToolMenuWireframe`, `VeltMediaSourceSettingsWireframe` |
| Video player | `VeltVideoPlayer`, `VeltCommentPlayerTimeline` | (no dedicated root wireframe: props + CSS) |
| Video editor | `VeltVideoEditor` | `VeltVideoEditorPlayerWireframe` |
| Transcription / Subtitles | (no top-level `Velt*` primitive: rendered inside the recorder player) | `VeltTranscriptionWireframe`, `VeltSubtitlesWireframe` |
| Activity log | `VeltActivityLog` | `VeltActivityLogWireframe` |
| Autocomplete (@mentions) | `VeltAutocomplete` | `VeltAutocompleteOptionWireframe`, `VeltAutocompleteGroupOptionWireframe`, `VeltAutocompleteEmptyWireframe`, `VeltAutocompleteChipTooltipWireframe` |
| Arrows / Tags | `VeltArrows` / `VeltTags` (+ `VeltArrowTool` / `VeltTagTool`) | limited / no wireframe slots (CSS + props) |
| Areas | `velt-areas` / `velt-area-tool` (custom elements; no `Velt*` React wrapper) | none (CSS + props) |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.