Skip to main content
Source of truth: exhaustive for what it covers. Generated from Velt wireframe metadata.
  • If a -wireframe slot isn’t in the Appendix, it doesn’t exist: registering or filling an unregistered -wireframe tag renders nothing.
  • Never invent or guess a slot name; use only tags that appear verbatim here or that you verified against ground truth and added here.
  • Scope: the Appendix aims to list every registered velt-*-wireframe slot element; it was extended with the verified families noted in the Appendix sub-sections (Comment Dialog Visibility Dropdown standalone family, Comments Sidebar root + filter-checkbox slots, Reactions root slots). The autocomplete panel child elements (velt-autocomplete-panel, …) are live custom elements, not -wireframe slots, so they are intentionally not in this wireframe appendix.
The 82 wireframe components @veltdev/react exports (the mount points), the full slot trees for the major surfaces, the slots that take input props, and: in the Appendix: the complete list of all 790 velt-*-wireframe slot elements registered by the SDK. Names are exact: copy verbatim. Every slot also accepts the common props veltIf, veltClass, and variant. veltIf/veltClass → Wireframe tokens; variables → Wireframe variables; variant (registering multiple looks for one component) → wireframe variants; general usage → Wireframes.
For per-component pages with React and Other Frameworks code examples and screenshots, see the Components sections in the sidebar (e.g. Comment Dialog Wireframes).

​
1. Wireframe components vs. wireframe slot elements (read this)

Two numbers, both real:
  • 82 top-level React components (Velt*Wireframe): these are what you import and mount (e.g. VeltCommentDialogWireframe, VeltNotificationsPanelWireframe). Listed by family below.
  • 790 wireframe slot elements: every fillable slot (including all nesting like …ThreadCard.Avatar) is its own registered velt-*-wireframe element. In React you reach them via the static dotted accessors (VeltCommentDialogWireframe.ThreadCard.Avatar); the complete, authoritative list of all 790 is in the Appendix at the bottom.
The family list below is the 82 mount points (the Agent Suggestion sub-family is summarized for readability):
(If a name isn’t in this list, it isn’t an exported wireframe.)

​
2. VeltCommentDialogWireframe: full slot tree

Slots are static properties; you arrange them in any layout. Fill the ones you want; the rest fall back to defaults.
ThreadCard must be nested inside Body → Threads: verified in-browser. Body/Threads is the per-comment loop; the ThreadCard template only receives comment data (avatar, name, time, message) when it lives inside it. Place ThreadCard at the dialog root instead and it renders as an empty card (header shows, body blank). Correct nesting:
In plain HTML: <velt-comment-dialog-body-wireframe><velt-comment-dialog-threads-wireframe><velt-comment-dialog-thread-card-wireframe>…</…></…></…>. Per-context variant: the dialog renders in two contexts: the floating pin dialog and each sidebar list row. Give them different layouts by registering two ThreadCard/Header wireframes with variant="dialog" vs variant="sidebar" (the live component picks the matching variant; see wireframe variants). Without a variant, one template serves both. Styling wireframe markup: shadow-DOM rule (verified in-browser):
  • Registering a root wireframe (e.g. VeltCommentDialogWireframe / velt-comment-dialog-wireframe) auto-removes that component’s own shadow DOM: it renders in light DOM and your external class CSS reaches it normally (no shadowDom={false} needed for the dialog itself).
  • Registering only a nested/leaf wireframe (e.g. just ThreadCard, with no root dialog wireframe) does not remove shadow DOM: your layout markup applies but class CSS won’t reach inside. Set shadowDom={false} (or dialogShadowDom={false} / injectCustomCss) explicitly.
  • Inline style="" always works in both cases (it survives the clone and lives inside whatever DOM).
  • Caveat: a root-wireframed dialog that renders inside another shadow-DOM component (e.g. the sidebar with its default shadow on) still sits in that component’s shadow root: turn the outer component’s shadow off too if you need class CSS there.
See shadow-DOM & wireframes.
Options dropdown content (…Options.Content = VeltCommentDialogOptionsDropdownContentWireframe): Assign, MakePrivate(.Enable,.Disable), Edit, Delete(.Comment,.Thread), Notification(.Subscribe,.Unsubscribe), MarkAsRead. Status content: Item(.Icon,.Name). Status trigger: Arrow,Name,Icon. Priority content: Item(.Icon,.Name,.Tick). Priority trigger: Arrow,Name,Icon.

​
3. VeltCommentsSidebarWireframe (V1): full slot tree

​
4. VeltCommentsSidebarV2Wireframe: full slot tree

Filter as bottom-sheet vs panel, and options as checkbox vs dropdown, are also controllable by props on the sidebar primitive: filterPanelLayout and filterOptionLayout. See Component config.

​
5. Smaller surfaces

  • VeltCommentBubbleWireframe: Avatar, CommentsCount, UnreadIcon.
  • VeltCommentPinWireframe (root tag velt-comment-pin-wireframe; replaces the whole pin): Index (alias Number), Triangle, GhostCommentIndicator, PrivateCommentIndicator, UnreadCommentIndicator.
    • Index / Number: what they are: a normal (pin/DOM-anchored) comment has an index (annotation.annotationIndex, placement order 1,2,3…) and an annotationNumber (annotation.annotationNumber). A page-mode comment has neither (it isn’t pinned to a coordinate), so those fields are empty for it. In the default pin/primitive these render automatically for normal comments (the on-pin number badge is gated by the commentIndex feature).
    • In a custom pin wireframe (verified in-browser): the bare Index/Number slot elements render as empty containers: when you replace the whole pin, print the value yourself with <velt-data field="annotation.annotationIndex"> (or annotation.annotationNumber). For a page-mode comment this renders blank (no index/number exists), so guard with velt-if if needed. Putting the bare <velt-data> directly in your markup gives full control of placement/style; the Index slot also carries its own default chrome (a positioned circle).
    • Color/shape-by-status: wrap branches in velt-if="{annotation.status.id} === 'OPEN' | 'IN_PROGRESS' | 'RESOLVED'" (multi-branch velt-if verified working). Inline styles required (pin renders in a shadow root).
  • VeltCommentsSidebarButtonWireframe: Icon, CommentsCount, UnreadIcon.
  • VeltReactionPinWireframe: Count, Emoji. VeltReactionsPanelWireframe: Items → Item → Emoji.
  • VeltNotificationsToolWireframe (root prop variant): Icon, Label, UnreadIcon, UnreadCount.
  • VeltNotificationsPanelWireframe: Header(.TabAll,.TabForYou,.TabDocuments,.TabPeople), Title/TitleText, ReadAllButton, ViewAllButton, CloseButton, SettingsButton, Skeleton, Content(.All,.ForYou,.Documents,.People,.List→Item(.Avatar,.Body,.FileName,.Headline,.Time,.Unread),.LoadMore,.AllReadContainer), Settings(.BackButton,.Header→Title,.Description,.List→Accordion(.Trigger,.Content→Item),.MuteAllToggle,.Footer).
  • Leaf wireframes (no sub-slots): VeltCommentThreadWireframe, VeltCommentComposerWireframe, VeltReactionToolWireframe, VeltCommentDialogOptionsDropdownTriggerWireframe.
For the deepest nesting of the smaller/recorder/autocomplete wireframes, compose the named sub-slots shown above; to confirm what a specific element renders as, inspect it in DevTools (shadowDom={false}) and look for its velt-*-wireframe tag.

​
6. Slots that take input props

Beyond veltIf/veltClass/variant, these slots accept extra props:
The filter bottom-sheet-vs-panel / checkbox-vs-dropdown distinction is structural in V1 (which slot subtree you compose) but prop-driven on the primitive (filterPanelLayout, filterOptionLayout): see Component config.

​
Appendix: all 790 wireframe slot elements (complete)

The authoritative, exhaustive list: every velt-*-wireframe element the SDK registers (from the component registry). Each is a fillable slot. In React, top-level ones are Velt*Wireframe components; nested ones are dotted accessors on their parent (e.g. velt-comment-dialog-thread-card-avatar-wireframe → VeltCommentDialogWireframe.ThreadCard.Avatar). A -wireframe element not in this list doesn’t exist (source-of-truth invariant).

​
Comment dialog (210)

​
Comments sidebar (V1 + button + status) (163)

​
Comment bubble / pin / thread / composer / tool (13)

​
Multi-thread comment dialog (24)

​
Inline comments section (25)

​
Text comment (7)

​
Notifications (69)

​
Reactions (17)

​
Recorder (111)

​
Transcription / subtitles (26)

​
Autocomplete / @mentions (11)

​
Presence / cursor (20)

​
Activity log (27)

​
Other (67)