The Comment Dialog is the comment thread UI — header, comments, composer, and actions — that appears when a user opens a comment from a pin, a text highlight, or the sidebar. You can customize it in 4 key ways:

1. Wireframes: Rearrange, replace, or remove parts of the default dialog
2. Template Variables: Render dialog data and drive show/hide logic and conditional classes
3. Primitives: Build a fully custom dialog UI from standalone components
4. Structure Reference: Canonical tree of every wireframe component

​

1. Wireframes

Wireframes are global templates that re-layout the default dialog. Define one once, and every Comment Dialog in your app renders with your layout — the behavior stays Velt’s. Use wireframes when:

• ✅ You want the default dialog, restyled or rearranged
• ✅ You want to remove parts you don’t need (for example the priority dropdown or reactions)
• ✅ You want to reorder sections or swap in your own HTML around them

Not a fit when:

• ❌ You want to place individual dialog pieces elsewhere in your app as standalone UI — use Primitives instead

Open the Wireframes reference →

​

2. Template Variables

The dialog exposes its data — annotation, comments, users, state — as template variables. Use them inside any wireframe tag in three forms: Open the Template Variables reference → Related concepts: Conditional Templates · Injecting your own data

​

3. Primitives

Primitives are standalone, functional components — 98+ granular building blocks (avatars, composers, action buttons, banners) you compose into a completely custom comment UI, inside or outside the dialog. Wireframes vs. Primitives: Open the Primitives reference →

​

4. Structure Reference

A canonical parent/child tree of every Comment Dialog wireframe component — React (VeltCommentDialogWireframe.*) and HTML (velt-comment-dialog-*-wireframe) names side by side. Use it to find the exact component to target before writing a wireframe. Open the Structure reference →

​

Related concepts

• Styling: themes, dark mode, and custom CSS
• Action Components: add custom buttons with callbacks to the dialog
• Localisation: translate the dialog’s static strings