> ## 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 Wireframes
> Reference for the Velt Comment Dialog wireframe components (React and HTML) that give you a preset layout you can restyle and rearrange freely.
> [!NOTE]
>
> New here? Start with the [Comment Dialog Customization overview](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/overview.md) for the ways to customize the dialog, and [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) for how wireframes work in general.
## Overview
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
## Ghost Banner
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Private Banner
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Assignee Banner
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
### Resolve Button (Assignee Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Unresolve Button (Assignee Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### User Avatar (Assignee Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### User Name (Assignee Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Header
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> // Pin Dialog Header
>
>
>
>
>
>
>
> // Sidebar Dialog Header
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
### Status (Header)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=64e0f3ae76a5c30b76795cd4b99f4208)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Trigger (Header Status)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=e3e2a89629d404a738d974170a95f0da)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Icon (Header Status Trigger)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=881358ba2e98d823e5f1159391cc2eee)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Header Status Trigger)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=514d5057301bc0bac4baa32ecb35dfa7)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Arrow (Header Status Trigger)**
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=9ac37faf9ad8c7c297cb4087f8c5b30e)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Content (Header Status)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=ff153039708c9e89f0c03cf93150370e)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Header Status Content)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=b5a7ac0f874cbc4a36eb77a208df7968)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Icon (Header Status Content Item)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=1373f271afcf048ff41853cc02f07f33)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Header Status Content Item)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=936c09200bedb3853507968d3f9418f0)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Priority (Header)
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=7f3e41fa47957b231d43a0f246c42827)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Trigger (Header Priority)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=ab838e039b8f11423792eb196205fc11)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Icon (Header Priority Trigger)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=3422f7b2b815124ad570c0054d3441f8)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Header Priority Trigger)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=0ba4c3a0a48da4595a1a189e6dfbae37)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Arrow (Header Priority Trigger)**
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=aa9bc78a6af4ebf32413caff0f295b17)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Content (Header Priority)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=9c33296d7babdd2b467c4bfcb621e4c8)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Header Priority Content)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=1906c8a05b54cc4d064ee247828eb824)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Icon (Header Priority Content Item)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=c6df74e0c107d8e7ccc7618826d95c3f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Header Priority Content Item)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=aa0ada111467b5ae591df65ae78c6b51)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Tick (Header Priority Content Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=a5601807c4025e42291569ad1733daa4)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Options (Header)
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=9452b4100b750c2661fbe4bfb00943cd)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Trigger (Header Options)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=a21fbb36d8de6eb3a0c801ad86e7eb2f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Content (Header Options)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=8a52449b60fb24f48962543d59bf2fb4)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
##### **Mark As Read (Header Options Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Make Private (Header Options Content)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=0516d89b6ab6df9abafde146743faa53)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Enable (Header Options Content Make Private)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=a409b7faaf9a793c22bfb01cb80e2a5a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Disable (Header Options Content Make Private)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=e1f61d8806c8d4a4d5db06dfd2120fb8)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Assign (Header Options Content)**
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=e08752fe16b93ca0b13d21c50ba83e9f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Edit (Header Options Content)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=8b2be2b55eec2b925265f6a275c562f8)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Delete (Header Options Content)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=3964289444d500a39cbdf9bfddf8d9a8)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Thread (Header Options Content Delete)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Comment (Header Options Content Delete)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Notification (Header Options Content)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=66d3c84f562c82a041a211c5af25f246)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Subscribe (Header Options Content Notification)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=6eb5817cc362a6678dde7648d7647021)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unsubscribe (Header Options Content Notification)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=9ce682ca90f55c2f15ff02f674f11647)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Copy Link (Header)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=fbf09bba5b0e72eca1993cd4d7097f46)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Resolve Button (Header)
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=cc78efb60985896f3833dd6dec886489)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Custom Annotation Dropdown (Header)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=a17bf04fcbbf25931a88e7bb43d0f8f1)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Trigger (Header Custom Annotation Dropdown)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=0e7c14be51e89f19aae6b58ef2e7ff53)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **List (Header Custom Annotation Dropdown Trigger)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=ce88b2e90d0eac0e61cd19c6ab8ec193)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Header Custom Annotation Dropdown Trigger List)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=ce88b2e90d0eac0e61cd19c6ab8ec193)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Remaining Count (Header Custom Annotation Dropdown Trigger)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=7131de0cfad834fb4cf273be0ae58048)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Placeholder (Header Custom Annotation Dropdown Trigger)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=7c3ff26befc5a239933c3039a7da5653)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Arrow (Header Custom Annotation Dropdown Trigger)**
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=189a367b3afa11226b20e6ae0376ff3c)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Content (Header Custom Annotation Dropdown)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=b393e02617bc7dbd067a6c5be12f0b02)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Header Custom Annotation Dropdown Content)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=71effc4645fcf806db5e07bf3ef312fc)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Label (Header Custom Annotation Dropdown Content Item)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=49f69f6652be8f2483978029bd9605f3)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Icon (Header Custom Annotation Dropdown Content Item)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=e185e37b99070e1eadd182a5b4cbd11f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Comment Index (Header)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=761e53b7424a49fcb0a5eb75983c21dd)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Comment Number (Header)
The annotation number displays in the comment dialog header, providing a persistent identifier for each comment that remains constant across sessions. This number makes it easy to reference specific comments in team discussions or documentation.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Comment Category (Header)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=ef22e8aa3cc3559eb0e2615e64c5e66a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Comment Suggestion Status (Header)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=4a3495083bca62d4df42965e60a922b7)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Navigation Button (Header)
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=634215731ce1295b36c5c0dc4237b7d7)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Private Badge
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Body
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
> ```
### Threads (Body)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=92adcf86083b4f1ce1cb5d1a62dfc53b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Thread Card (Body Threads)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=a6b802a4e2bae90f82f7b05b30081f1d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
##### **Avatar (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=b19aabdbe6ae6b69ef62080c7b3104e6)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=c8d9bc2f3cf22656db7084fce2372744)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unread (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=bd4ffb6ec34fb8d1401bc0ecfb611992)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Seen Dropdown (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=5fbf2b16c6e8a26c68241ff5dc5174e6)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Trigger (Body Threads Thread Card Seen Dropdown)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=fdfcef2d023cc5bcb1265642d237a442)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Content (Body Threads Thread Card Seen Dropdown)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=8fa30559d2c33d3b8b772762cc686263)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Title (Body Threads Thread Card Seen Dropdown Content)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=427ef7d49b9df4e34f5073561d14d873)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Items (Body Threads Thread Card Seen Dropdown Content)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=793d28194c98e84394f8c82d89f7d6dc)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Body Threads Thread Card Seen Dropdown Content Items)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=fca98407341af48443fdd12e69344300)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Time (Body Threads Thread Card Seen Dropdown Content Items Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=db8cd1e45e32a50a7af419c0cbb722aa)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Body Threads Thread Card Seen Dropdown Content Items Item)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=5902d911308bbc80d349be6ae5c41bd7)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Avatar (Body Threads Thread Card Seen Dropdown Content Items Item)**
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=ad07a02dc35454fee7eb76f7e8a7d759)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Time (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=4e8e256486ef4cc84a61b8260561a001)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Device Type (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=f03a17067d0f92d901937c82bc9a6fab)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Edited (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=f687d776e9dbe87bb56f37ead6b95000)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Options (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=456c2fd5416ead98e0df9eb6b199c207)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Trigger (Body Threads Thread Card Options)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=791032c17c309fc14944152f8844c77c)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Content (Body Threads Thread Card Options)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=c82c2e39f127d38b93dca7d2a82b9951)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Mark As Read (Body Threads Thread Card Options Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Edit (Body Threads Thread Card Options Content)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=8974aace9ed4d8abf260d53eb53ac5ad)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Delete (Body Threads Thread Card Options Content)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=89735013a02ecae0e74545525131830a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Thread (Body Threads Thread Card Options Content Delete)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Comment (Body Threads Thread Card Options Content Delete)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Message (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=fd62d8bcf7b68cc4c194450f17bd650a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **ShowMore (Body Threads Thread Card Message)**
Visible when message truncation is enabled and the message exceeds the line limit. Clicking expands the message.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **ShowLess (Body Threads Thread Card Message)**
Visible when an expanded truncated message is shown. Clicking collapses it back.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **EditComposer (Body Threads Thread Card)**
Conditionally renders when a comment is being edited.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Reaction Tool (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=aaf9c12a223b6d0a040467c266b2f298)
Use `excludeReactionIds` to hide specific reactions from the reaction picker.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Reactions (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=260fdbc7cccba96e89a0126a12b45e4b)
Use `excludeReactionIds` to hide specific reactions from display.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **ReactionPin (Body Threads Thread Card)**
Display a specific reaction as a pinned standalone element.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**Props**:
* `reactionId` ([`IVeltCommentDialogThreadCardReactionPinProps`](https://velt.dev/docs/api-reference/sdk/models/data-models#iveltcommentdialogthreadcardreactionpinprops)): Unique identifier of the reaction to pin and display
##### **Attachments (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=a58fcfd2897691128f32ecfc67728e30)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Image (Body Threads Thread Card Attachments)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=f95ad6093576f909fbc8369a1b3dffbf)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Preview (Body Threads Thread Card Attachments Image)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=adfd7cb8750345f73416119b2bf23774)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Delete (Body Threads Thread Card Attachments Image)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=cf43b48613c3bfb143e971a0bd79f553)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Download (Body Threads Thread Card Attachments Image)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=f6014813860807740bccfca724299a85)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Other (Body Threads Thread Card Attachments)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=c80a08f1a6edb7942e4d671ede34c27d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
> ```
##### **Delete (Body Threads Thread Card Attachments Other)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=6879d8b6b077e1c7b8c4ee854199fb20)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Download (Body Threads Thread Card Attachments Other)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=aa7918f577f25647e7d4e5c008a3aeed)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Icon (Body Threads Thread Card Attachments Other)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=15b2b652460b4863dbfa27e4fd1da0d8)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Body Threads Thread Card Attachments Other)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=f89d84ebb000f4a9c2e1f071033b0d59)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Size (Body Threads Thread Card Attachments Other)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=e7643e8c0219ef6d98e979e335ab5de4)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Recordings (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=281d948ef02ac809df40d4f00268746b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Autocomplete Chip Tooltip (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=795d7eaaa55db39a5c4611a13163b644)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Icon (Body Threads Thread Card Autocomplete Chip Tooltip)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=4b3f7c1cc12c97af6c408538d937fd5b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Body Threads Thread Card Autocomplete Chip Tooltip)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=349fadb6f0365f2fd6e0511ea051dbcc)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Description (Body Threads Thread Card Autocomplete Chip Tooltip)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=4cf4118868c42c95032ba6f7208aab67)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Reactions Panel (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=22cbadec5556d1893b1b93301366cadc)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Items (Body Threads Thread Card Reactions Panel)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=393c719dbc9a90405632db48adda2b09)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Body Threads Thread Card Reactions Panel Items)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=a1b25ddd63748f8741ced7909f8968b6)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Emoji (Body Threads Thread Card Reactions Panel Items Item)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=652132ebf168511aeb78cdd4427e21ce)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Reaction Pin (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=fbc11f0f154796c12665ae61fffd8377)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Emoji (Body Threads Thread Card Reaction Pin)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=e7bcbeaeebfe23471610192c17f632e5)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Body Threads Thread Card Reaction Pin)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=9e75de6b7691133c5ac530d93b2a45bc)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Reaction Pin Tooltip (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=02c7a6023b0765fa4b0f583f8084370a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Users (Body Threads Thread Card Reaction Pin Tooltip)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=67241b3c119150c344fdd895bfd2cc1c)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **User (Body Threads Thread Card Reaction Pin Tooltip Users)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=052f51c49cdb44666f2a39d48d8dc3e6)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Avatar (Body Threads Thread Card Reaction Pin Tooltip Users User)**
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=165e75f1f7d252c31fe8ee44cf1a2e26)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Body Threads Thread Card Reaction Pin Tooltip Users User)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=15e1a1b3fe79aecd5780824a38a6b04b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Reaction Tool (Body Threads Thread Card)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=aaf9c12a223b6d0a040467c266b2f298)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> {/* Your custom element */}
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Reply (Body Threads Thread Card)**
The Reply component provides a quick reply button on each comment thread card, enabling users to respond directly without expanding the full comment dialog. This streamlines the commenting workflow in collaborative environments.
This button is hidden by default and can be enabled through wireframe customization.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Actions (Body Threads Thread Card)**
Renders the chip row for `comment.actions`, falling back to `annotation.actions` when the row doesn't set its own list. See [Actions](https://velt.dev/docs/async-collaboration/comments/customize-behavior.md#actions) for the behavior this re-skins.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
> [!NOTE]
>
> The chip is also exported as a flat, top-level wireframe: `VeltCommentDialogActionChipWireframe` / `velt-comment-dialog-action-chip-wireframe`. Neither component takes a `type` attribute; there are no type variants.
##### **Assign Button (Body Threads Thread Card)**
The Assign Button component allows you to customize the assign button that appears on individual comment thread cards.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### MoreReply (Body Threads)
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=4af3a57b028bab4d17ca9cbc2722762d)
The expander row that splits the "Show N replies…" divider into its count and its pluralized noun. Compose the label as `Show` + `Count` + `Text` (e.g. "Show 1 reply", "Show 3 replies").
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> Show
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
> Show
>
>
>
>
> ```
##### **Count (Body Threads MoreReply)**
Renders the number of hidden replies (`annotation.comments.length - 2`, clamped to ≥ 0; e.g. `1` for a 3-comment thread).
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Text (Body Threads MoreReply)**
Renders the pluralized noun — `reply` when exactly one reply is hidden, otherwise `replies`.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Reply Avatars (Body)
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=760d9b64e290b4949e7558ce0f5c5506)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### List (Body Reply Avatars)
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=19f3923f8f130ae3556a90393e16f933)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Body Reply Avatars List)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=952ef1cba5420ce7a7a1b300819334c2)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Remaining Count (Body Reply Avatars)
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=08443c0dc604d59883452692285fa666)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Toggle Reply (Body)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=f7ecacd5a45a9979fe936e5abc676697)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
#### Icon (Body Toggle Reply)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=c2af8fc746c793205a00c9613d9a5e47)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Count (Body Toggle Reply)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=bea5ce45d268ecc6fe8596681effb805)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Text (Body Toggle Reply)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=3b5fb03fe7b1f8a9ced96db0fdf30fb3)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Hide Reply (Body)
The Hide Reply component adds a button to hide replies in the comment dialog, letting you control when replies are visible to match your workflow.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Progress (Body)
The Progress row renders between the last message and the reply composer while a comment's `progress.state` is `'active'`. See [Progress](https://velt.dev/docs/async-collaboration/comments/customize-behavior.md#progress) for the behavior this re-skins.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Dots (Body Progress)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Label (Body Progress)
Renders the label of the last step marked `active`, else the last step's label, else the default "Processing…" label. The only live region in the row (`role="status"`, `aria-live="polite"`).
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
> [!NOTE]
>
> `Dots` and `Label` are also exported as flat, top-level wireframes: `VeltCommentDialogProgressDotsWireframe` / `velt-comment-dialog-progress-dots-wireframe` and `VeltCommentDialogProgressLabelWireframe` / `velt-comment-dialog-progress-label-wireframe`.
## Composer
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> hotkey="@">
> hotkey="#">
> type="file | attachments">
> type="audio">
> type="video">
> type="screen">
> type="format">
> type="submit">
>
>
>
>
>
> ```
### Avatar (Composer)
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=ab1c48b29bea9af3140120c9bad8852a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Attachments (Composer)
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=d0dae21e5d631a4f49cbba6a4d256ff9)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
#### Selected (Composer Attachments)
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=f431e624edbb4cbda7016bba282cd82b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Image (Composer Attachments Selected)**
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=24ebcd0fcc600f0f2c87315c28b8cfc6)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Other (Composer Attachments Selected)**
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=0dbf7296cc69ba2748a74d8c32784c05)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
> ```
#### Invalid (Composer Attachments)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=e79d8ba08511d5148657eda647b47f14)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Composer Attachments Invalid)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Download (Composer Attachments Image)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Download (Composer Attachments Other)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Recordings (Composer)
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=7fbe0065f1f8e1e19efad937283a2a22)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Input (Composer)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=33e47748e24c55a9fcc4991bd3b57980)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Format Toolbar (Composer)
The format toolbar contains text formatting buttons (bold, italic, underline, strikethrough).
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
#### Button (Composer Format Toolbar)
Individual format button with type: `bold`, `italic`, `underline`, or `strikethrough`.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Action Button (Composer)
Supports types: `autocomplete`, `file`, `attachments`, `audio`, `video`, `screen`, `format`, `submit`.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
### Assign User (Composer)
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=cb91db82e189bbddbdb06832908f59e9)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Visibility Dropdown (Composer)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
> ```
#### Trigger (Composer Visibility Dropdown)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Label (Composer Visibility Dropdown Trigger)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Icon (Composer Visibility Dropdown Trigger)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Content (Composer Visibility Dropdown)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Public (Composer Visibility Dropdown Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Private (Composer Visibility Dropdown Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Autocomplete Option (Composer)
> [!NOTE]
>
> For standalone autocomplete primitive components (e.g., `VeltAutocompleteOption`, `VeltAutocompleteChip`), see the [Autocomplete Primitives](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/primitives.md#veltautocomplete) section.
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=2b265d465cff1f1e8c2eaafeb98771b4)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
#### Icon (Composer Autocomplete Option)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=3d68c247287d354a74c1de7ad92414d7)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Name (Composer Autocomplete Option)
.png?fit=max\&auto=format\&n=5zFLWa7VGpD2-PbL\&q=85\&s=2ae93a65726cdf02d89232deedb57f3f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Description (Composer Autocomplete Option)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=e39ef81a8ddcd0fe8ac3e4fe26dbddc4)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Error Icon (Composer Autocomplete Option)
.png?fit=max\&auto=format\&n=D3H57YRXE5hyzieb\&q=85\&s=b7978fad684c077b12519c4e2e5bb315)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Autocomplete Group Option (Composer)
.png?fit=max\&auto=format\&n=CZVTE7gW-9aTlZ5H\&q=85\&s=5f05b218b694299b5cf9cc5de32b290b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Visibility Banner
Displays below the composer to let users set per-comment visibility. The `selectedVisibility` data variable exposes the current [`CommentVisibilityOptionType`](https://velt.dev/docs/api-reference/sdk/models/data-models#commentvisibilityoptiontype).
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
### Icon (Visibility Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Text (Visibility Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Dropdown (Visibility Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Trigger (Visibility Banner Dropdown)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Label (Visibility Banner Dropdown Trigger)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **AvatarList (Visibility Banner Dropdown Trigger)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
**Item (Visibility Banner Dropdown Trigger AvatarList)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**RemainingCount (Visibility Banner Dropdown Trigger AvatarList)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Icon (Visibility Banner Dropdown Trigger)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Content (Visibility Banner Dropdown)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
##### **Item (Visibility Banner Dropdown Content)**
Accepts `type`: `'public' | 'org-users' | 'personal' | 'selected-people'`.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
**Icon (Visibility Banner Dropdown Content Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**Label (Visibility Banner Dropdown Content Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **UserPicker (Visibility Banner Dropdown Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
**Search (Visibility Banner Dropdown Content UserPicker)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
**Icon (Visibility Banner Dropdown Content UserPicker Search)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**Input (Visibility Banner Dropdown Content UserPicker Search)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**Header (Visibility Banner Dropdown Content UserPicker)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
**Count (Visibility Banner Dropdown Content UserPicker Header)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**UnselectAll (Visibility Banner Dropdown Content UserPicker Header)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**Item (Visibility Banner Dropdown Content UserPicker)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
**Avatar (Visibility Banner Dropdown Content UserPicker Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**Info (Visibility Banner Dropdown Content UserPicker Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
**Check (Visibility Banner Dropdown Content UserPicker Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **OrgPicker (Visibility Banner Dropdown Content)**
The "Selected Teams" picker — the team analogue of the user ("Selected People") picker; lets users scope an `organizationPrivate` comment to specific teams. Appears automatically in the visibility banner once a team list is provided via `contactElement.updateOrgList()`.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## All Comment
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Approve
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Sign In
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Upgrade
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Suggestion
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
### Suggestion Header
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
#### Agent (Suggestion Header)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Author (Suggestion Header)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Avatar (Suggestion Header Agent)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Avatar (Suggestion Header Author)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Name (Suggestion Header Agent)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Name (Suggestion Header Author)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Timestamp (Suggestion Header)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Menu (Suggestion Header)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Menu Trigger (Suggestion Header Menu)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Menu Content (Suggestion Header Menu)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Menu Content Item (Suggestion Header Menu Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Icon (Suggestion Header Menu Content Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Label (Suggestion Header Menu Content Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Suggestion Body
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Suggestion Footer
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
#### Open Comment (Suggestion Footer)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Suggestion Actions
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
#### Accept (Suggestion Actions)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Reject (Suggestion Actions)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Suggestion Banner
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
> ```
#### Avatar (Suggestion Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **User Image (Suggestion Banner Avatar)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Status Icon (Suggestion Banner Avatar)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Label (Suggestion Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Separator (Suggestion Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Resolver User Name (Suggestion Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Timestamp (Suggestion Banner)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Styling
### Disable ShadowDOM
* By default, ShadowDOM is used to ensure that your app's CSS does not interfere with the styling of the SDK components.
* Disable the shadow dom to apply your custom CSS to the component.
`Default: true`
> [tab] React / Next.js
>
> ##### **Example**
>
> ```jsx theme={null}
>
> ```
>
> ##### **API methods**
>
> ```jsx theme={null}
> const commentElement = client.getCommentElement();
> commentElement.enableDialogShadowDOM();
> commentElement.disableDialogShadowDOM();
> ```
> [tab] Other Frameworks
>
> ##### **Example**
>
> ```
>
> ```
>
> ##### **API methods**
>
> ```jsx theme={null}
> const commentElement = Velt.getCommentElement();
> commentElement.enableDialogShadowDOM();
> commentElement.disableDialogShadowDOM();
> ```
### Dark Mode
By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode.
`Default: false`
Below are the examples to enable Dark Mode for comments dialog:
> [tab] React / Next.js
>
> ##### **Example**
>
> ```js theme={null}
>
> ```
>
> ##### **API methods**
>
> ```jsx theme={null}
> const commentElement = client.getCommentElement();
> commentElement.enableDarkMode();
> commentElement.disableDarkMode();
> ```
> [tab] Other Frameworks
>
> ##### **Example**
>
> ```js theme={null}
>
> ```
>
> ##### **API methods**
>
> ```jsx theme={null}
> const commentElement = Velt.getCommentElement();
> commentElement.enableDarkMode();
> commentElement.disableDarkMode();
> ```
## Pre-defined Variants
The Comment Dialog has 2 pre-defined variants:
* `dialog`: this will customize the Comment Dialog only within Pin, Area, and Text Comments
* `sidebar`: this will customize the Comment Dialog only within Sidebar comments
To use them, set the `variant` name in the wireframe template equal to one of the pre-defined variants. You do not need to add it to the actual Velt component.
> [tab] React / Next.js
>
> ```jsx React / Next.js theme={null}
>
> {/* This pre-defined variant will change the appearance of the Comment Dialog within Pin, Area, and Text comments only */}
>
> ...
>
>
> {/* This pre-defined variant will change the appearance of the Comment Dialog within the Sidebar only */}
>
> ...
>
>
> {/* If you don't use any variants, then customization will be applied to the Comment Dialog globally */}
>
> ...
>
>
> ```
> [tab] Other Frameworks
>
> ```jsx Other Frameworks theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.