> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-da95e4d7.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Comment Dialog Customization

> The four ways to customize the Velt Comment Dialog — wireframes, template variables, primitives, and the structure reference — and when to use each.

<Note>
  New to Velt customization? Read the [UI Customization Concepts](/ui-customization/overview) first — wireframes, template variables, and conditional templates work the same way across all Velt components.
</Note>

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**](#1-wireframes): Rearrange, replace, or remove parts of the default dialog
2. [**Template Variables**](#2-template-variables): Render dialog data and drive show/hide logic and conditional classes
3. [**Primitives**](#3-primitives): Build a fully custom dialog UI from standalone components
4. [**Structure Reference**](#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](#3-primitives) instead

[Open the Wireframes reference →](/ui-customization/features/async/comments/comment-dialog/wireframes)

# 2. Template Variables

The dialog exposes its data — annotation, comments, users, state — as template variables. Use them inside any wireframe tag in three forms:

| You want to…              | Use                         | Example                                         |
| ------------------------- | --------------------------- | ----------------------------------------------- |
| Display a value as text   | `<velt-data field="var" />` | `<velt-data field="annotation.from.name" />`    |
| Hide / show conditionally | `velt-if="{var}"`           | `velt-if="{isPrivateComment}"`                  |
| Toggle a CSS class        | `velt-class="'cls': {var}"` | `velt-class="'is-private': {isPrivateComment}"` |

[Open the Template Variables reference →](/ui-customization/features/async/comments/comment-dialog/wireframe-variables)

Related concepts: [Conditional Templates](/ui-customization/conditional-templates) · [Injecting your own data](/ui-customization/template-variables#2-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:**

|               | Wireframes                                  | Primitives                              |
| ------------- | ------------------------------------------- | --------------------------------------- |
| What they are | Non-functional layout templates             | Functional components                   |
| Scope         | Re-template the default dialog globally     | Compose anywhere in your app            |
| Best for      | Restyling / rearranging the existing dialog | Building your own comment UI from parts |

<Tip>
  Explore primitives interactively in our [Storybook](https://storybook.velt.dev/).
</Tip>

[Open the Primitives reference →](/ui-customization/features/async/comments/comment-dialog/primitives)

# 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 →](/ui-customization/features/async/comments/comment-dialog-structure)

# Related concepts

* [Styling](/ui-customization/styling): themes, dark mode, and custom CSS
* [Action Components](/ui-customization/custom-action-component): add custom buttons with callbacks to the dialog
* [Localisation](/ui-customization/localisation): translate the dialog's static strings