> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/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](https://velt.dev/docs/ui-customization/overview.md) first: wireframes, template variables, and conditional templates work the same way across all Velt components.

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 →](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframes.md)

# 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 →](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframe-variables.md)

Related concepts: [Conditional Templates](https://velt.dev/docs/ui-customization/conditional-templates.md) · [Injecting your own data](https://velt.dev/docs/ui-customization/template-variables.md#inject-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/).

[Open the Primitives reference →](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/primitives.md)

# 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 →](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog-structure.md)

# Related concepts

* [Styling](https://velt.dev/docs/ui-customization/styling.md): themes, dark mode, and custom CSS
* [Action Components](https://velt.dev/docs/ui-customization/custom-action-component.md): add custom buttons with callbacks to the dialog
* [Accessibility & localization](https://velt.dev/docs/ui-customization/accessibility-and-localization.md): translate the dialog's static strings


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.