> ## 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 row lists: * The **primitive** and the **root wireframe** (registering the root 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. * 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 | Surface | Primitive · Root wireframe | Key props | Off-by-default flags | Key variables | | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Comment dialog (a thread) | `VeltCommentDialog` · `VeltCommentDialogWireframe` *(root: shadow auto-off, verified)* | `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", verified)* | `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` is on by default) | `{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` (string in V2), `position`, `variant`, `dialogVariant`, `filterPanelLayout`, `pageMode`, `focusedThreadMode`, `darkMode`; filter config: `filters` / `miniFilters` / `minimalFilters`, `filterOperator` ([`Component config`](/ui-customization/reference/component-config)) | 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`](/ui-customization/layout) and the slot tree below. * Comment pin: `Index`/`Number` slots are empty containers: print with ``; page-mode comments have no index/number. * Sidebar (V1): container slots drop undeclared children: declare the full tree. * Text / Inline / Multi-thread surfaces: see [`Comment surfaces`](/ui-customization/features/comment-surfaces). Comment tool context: see [`Context`](/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` | `{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`](/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)** | 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`](/ui-customization/reference/wireframe-components); what each slot *is* is defined in [`Component definitions`](/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](/ui-customization/layout#5-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: | 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`](/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) |