> ## Documentation Index > Fetch the complete documentation index at: https://velt-codex-ui-customization-guide-refresh.mintlify.site/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. **Source of truth: exhaustive for what it covers.** Generated from Velt customization metadata. **If a name isn't on this page (or its linked companions), it doesn't exist**: don't use it. Never invent or guess a name; use only identifiers that appear verbatim here or in the companion references, or that you verified against ground truth and added here. *Scope: comments are mapped exhaustively (primitive ↔ wireframe); other features are summarized at the end: see the companion references for their complete data.* 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`](/ui-customization/features/other-features)). > **Companion references (use these for the complete data):** > > * [`Wireframe components`](/ui-customization/reference/wireframe-components): all **82** wireframe components + **full** slot trees + slot input props. > * [`Primitives`](/ui-customization/reference/primitives): all **491** primitive components (incl. every sub-component). > * [`Component config`](/ui-customization/reference/component-config): layout/mode **props** (filter layout, embed mode, panel mode, …). > * [`CSS classes`](/ui-customization/reference/css-classes): structural + stateful **CSS classes**. > * [`Wireframe variables`](/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`](/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 lists the **primitive**, the **root wireframe** (registering it is what turns shadow DOM off for that surface: see [`CSS`](/ui-customization/styling#shadow-dom--wireframes-root-vs-nested) and decision-tree S6), the **key props** a customization typically sets, the **off-by-default flags** to enable if the design shows them, and the **key `{variables}`** for dynamic markup. These are the *common* identifiers: the **exhaustive** lists are [`Props`](/ui-customization/reference/props), [`Feature flags`](/ui-customization/reference/feature-flags), and [`Wireframe variables`](/ui-customization/template-variables); slot trees are [`Wireframe components`](/ui-customization/reference/wireframe-components). Never use a name that isn't in those (R10). **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). Dialog and pin are *verified in-browser* in [`Wireframe components`](/ui-customization/reference/wireframe-components). Nested/leaf-only wireframes don't remove shadow: set `shadowDom={false}` there. ### Comments **Comment dialog (a thread)** * Primitive `VeltCommentDialog` · Root `VeltCommentDialogWireframe` *(root: shadow auto-off, verified)* * Key props: `annotationId`, `variant`, `commentPinType`, `readOnly`, `messageTruncation`, `fullExpanded` * Off-by-default flags: `priority`, `replyAvatars`, `commentIndex`, `sidebarButtonOnCommentDialog`, `formatOptions` * Key variables: `{annotation.status.id}` (`OPEN`/`IN_PROGRESS`/`RESOLVED`), `{annotation.priority.id}`, `{annotation.comments.length}`, `{annotation.unreadCount}`, `{annotation.assignedTo}` * Refs: [`Wireframes`](/ui-customization/layout) · slot tree below / [`Wireframe components`](/ui-customization/reference/wireframe-components). **Gotcha:** `ThreadCard` must nest in `Body → Threads`. **Comment pin** * Primitive `VeltCommentPin` · Root `VeltCommentPinWireframe` *(root: "replaces the whole pin", verified)* * Key props: `annotationId`, `variant`, `context`, `locationId` * Off-by-default flags: `commentIndex` (the on-pin number), `deviceInfo`, `commentPinHighlighter` * Key variables: `{annotation.status.id}`, `{annotation.annotationIndex}`, `{annotation.annotationNumber}`, `{annotation.priority.name}`, `{annotation.unreadCount}` * Refs: [`Wireframe components`](/ui-customization/reference/wireframe-components). **Gotcha:** `Index`/`Number` slots are empty containers: print with ``; page-mode comments have no index/number. **Comment bubble** * Primitive `VeltCommentBubble` · Root `VeltCommentBubbleWireframe` * Key props: `targetElementId`, `avatar`, `variant`, `commentCountType`, `annotationId`, `context` * Off-by-default flags: `bubbleOnPin` (`bubbleOnPinHover` is on by default) * Key variables: `{annotation.status.id}`, `{annotation.comments.length}`, `{annotation.unread}`, `{annotation.unreadCount}` * Refs: [`Wireframe components`](/ui-customization/reference/wireframe-components). **Comments sidebar (V1)** * Primitive `VeltCommentsSidebar` · Root `VeltCommentsSidebarWireframe` * Key props: `embedMode`, `variant`, `position`, `pageMode`, `filterConfig`, `filterPanelLayout`, `focusedThreadMode`, `readOnly` * Key variables: `{focusedAnnotation}`, `{appliedFiltersCount}`, `{unreadCommentAnnotationCount}`, `{noCommentsFound}` * Refs: slot tree below / [`Wireframe components`](/ui-customization/reference/wireframe-components) · [`Component config`](/ui-customization/reference/component-config) (filters). **Gotcha:** container slots drop undeclared children: declare the full tree. **Comments sidebar (V2)** * Primitive `VeltCommentsSidebarV2` · Root `VeltCommentsSidebarV2Wireframe` * Key props: `embedMode` (string in V2), `position`, `variant`, `dialogVariant`, `filterPanelLayout`, `pageMode`, `focusedThreadMode`, `darkMode` * Config: `filters` / `miniFilters` / `minimalFilters`, `filterOperator` ([`Component config`](/ui-customization/reference/component-config)) * Key variables: `{focusedAnnotation}`, `{appliedFiltersCount}`, `{noCommentsFound}` * Refs: slot tree below / [`Wireframe components`](/ui-customization/reference/wireframe-components). **Sidebar toggle button** * Primitive `VeltSidebarButton` / `VeltCommentsSidebarButton` · Root `VeltSidebarButtonWireframe` / `VeltCommentsSidebarButtonWireframe` * Key props: `variant`, `position`, `sidebarVariant`, `filterPanelLayout`, `commentCountType`, `sidebarShadowDom`, `pageMode` * Refs: [`Props`](/ui-customization/reference/props). **Comment tool** * Primitive `VeltCommentTool` · Root `VeltCommentToolWireframe` * Key props: `targetElementId`, `variant`, `context`, `locationId`, `disabled` * Off-by-default flags: `contextInPageModeComposer` (on `VeltCommentTool`) * Refs: [`Props`](/ui-customization/reference/props) · [`Context`](/ui-customization/context). **Inline comments section** * Primitive `VeltInlineCommentsSection` · Root `VeltInlineCommentsSectionWireframe` * Key props: `config`, `targetElementId`, `variant`, `dialogVariant`, `composerVariant`, `composerPosition`, `multiThread`, `fullExpanded`, `readOnly` * Key variables: `{annotations}`, `{filterState.filters}`, `{sortState.sortBy}`, `{featureState.readOnly}` * Refs: [`Comment surfaces`](/ui-customization/features/comment-surfaces). **Text comment** * Primitive `VeltTextComment` · Root `VeltTextCommentToolWireframe` / `VeltTextCommentToolbarWireframe` * Key props: `annotationId`, `multiThreadAnnotationId` * Key variables: `{annotation.status.id}`, `{totalComments}`, `{selectedWordsCount}` * Refs: [`Comment surfaces`](/ui-customization/features/comment-surfaces). **Multi-thread comment dialog** * Primitive `VeltMultiThreadCommentDialog` · Root `VeltMultiThreadCommentDialogWireframe` * Key props: `annotationId`, `multiThreadAnnotationId`, `variant`, `commentPinType`, `dialogVariant`, `inboxMode`, `readOnly`, `context` * Key variables: `{filteredAnnotations}`, `{commentPinSelected}`, `{minimalFilter}`, `{noCommentsFound}` * Refs: [`Comment surfaces`](/ui-customization/features/comment-surfaces). **Comment composer (standalone)** * Primitive `VeltCommentComposer` · Root `VeltCommentComposerWireframe` * Key props: `variant`, `dialogVariant`, `context`, `locationId`, `documentId`, `folderId`, `targetComposerElementId`, `placeholder`, `readOnly`, `darkMode` * Refs: [`Wireframe components`](/ui-customization/reference/wireframe-components) · [`Props`](/ui-customization/reference/props). **Comments minimap** * Primitive `VeltCommentsMinimap` · no wireframe (style via props + CSS) * Key props: `position`, `targetScrollableElementId` * Off-by-default: minimap renders nothing until enabled: call `commentElement.enableMinimap()` (disable with `disableMinimap()`). Not gated by a JSX flag. * Refs: [`Comment surfaces`](/ui-customization/features/comment-surfaces). ### Notifications **Notifications panel** * Primitive `VeltNotificationsPanel` · Root `VeltNotificationsPanelWireframe` * Key props: `tabConfig`, `panelOpenMode`, `settings`, `settingsLayout`, `variant`, `pageSize`, `darkMode`, `shadowDom` * Off-by-default flags: `settings`, `enableSettingsAtOrganizationLevel`, `selfNotifications`, `readNotificationsOnForYouTab`, `enableCrossOrganization` * Key variables: `{selectedTab}`, `{notification}` (`.type`/`.from.name`/`.read`/`.createdAt`/`.documentName`/`.count`), `{unreadNotificationsForYou}`, `{notificationsPanelVisible}` * Refs: [`Notifications`](/ui-customization/features/notifications). **Notifications tool (bell)** * Primitive `VeltNotificationsTool` · Root `VeltNotificationsToolWireframe` * Key props: `tabConfig`, `panelOpenMode`, `panelVariant`, `settings`, `variant`, `panelShadowDom`, `pageSize`, `darkMode` * Key variables: `{unreadNotificationsForYou}`, `{notification}` (per-item, in the panel) * Refs: [`Notifications`](/ui-customization/features/notifications). **Notifications history** * Primitive `VeltNotificationsHistoryPanel` · (rendered inline; no separate root wireframe) * Key props: `embedMode`, `onNotificationClick`, `darkMode` * Refs: [`Notifications`](/ui-customization/features/notifications). **Notifications bottom sheet (mobile)** * Internal container `velt-notifications-bottom-sheet-internal`: no public `Velt*` React wrapper; the bell/panel open mode mounts the `NotificationsPanel` inside a `MatBottomSheet` on mobile. * Key props: `pageSize` (passed through to the panel). The panel renders in bottom-sheet mode (`.bottom-sheet` class): reuses `VeltNotificationsPanelWireframe` for content. * Refs: [`Notifications`](/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`](/ui-customization/reference/wireframe-components)): ``` VeltCommentDialogWireframe.* (top-level slots) Header Status Priority CopyLink ResolveButton UnresolveButton Options CloseButton NavigationButton CommentIndex CommentNumber Approve DeleteButton AssignMenu VisibilityBanner VisibilityDropdown PrivateBanner GhostBanner AssigneeBanner Body Threads ThreadCard Composer ToggleReply HideReply MoreReply AllComment ReplyAvatars CommentCategory CustomAnnotationDropdown SignIn Upgrade AgentSuggestion SuggestionAction CommentSuggestionStatus VeltCommentDialogWireframe.ThreadCard.* Avatar Name Time Edited Draft Unread DeviceType Message Attachments Recordings Reactions ReactionTool ReactionPin Options AssignButton SeenDropdown Reply EditComposer VeltCommentDialogWireframe.AssigneeBanner.* UserAvatar UserName ResolveButton UnresolveButton VeltCommentDialogWireframe.Composer.* Avatar Input ActionButton (ActionButton has a `type` prop: e.g. "submit", "attachments", "userMentions", and more; see source) Options dropdown content (VeltCommentDialogOptionsDropdownContentWireframe).* Edit Delete Assign MakePrivate Notification MarkAsRead ``` > Deeper nesting and each slot's props are in [`Wireframe components`](/ui-customization/reference/wireframe-components). Use that for the exact prop on a given slot. Behavior lives in these slots (resolve, delete, submit, etc.): your markup goes *inside* a slot as its appearance (see the [interactivity rule](/ui-customization/layout#6-the-interactivity-rule-the-single-most-important-thing)). *** ## Sidebar slot trees **`VeltCommentsSidebarWireframe`**: commonly-used slots (the complete set is in [`Wireframe components`](/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: ``` VeltCommentsSidebarV2Wireframe.* Skeleton Panel Header List EmptyPlaceholder PageModeComposer FilterButton FilterContainer FilterDropdown FocusedThread Search 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`](/ui-customization/reference/wireframe-components). *** ## How to find the complete slot list for a feature 1. **[`Wireframe components`](/ui-customization/reference/wireframe-components)**: the full slot tree + slot props for every wireframe. 2. **[`Wireframe variables`](/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`](/ui-customization/features/other-features): | 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) |