We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.
Overview

- React / Next.js
- Other Frameworks
Ghost Banner

- React / Next.js
- Other Frameworks
Private Banner

- React / Next.js
- Other Frameworks
Assignee Banner

- React / Next.js
- Other Frameworks
Resolve Button (Assignee Banner)

- React / Next.js
- Other Frameworks
User Avatar (Assignee Banner)

- React / Next.js
- Other Frameworks
User Name (Assignee Banner)

- React / Next.js
- Other Frameworks
Header

- React / Next.js
- Other Frameworks
Status (Header)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=64e0f3ae76a5c30b76795cd4b99f4208)
- React / Next.js
- Other Frameworks
Trigger (Header Status)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=e3e2a89629d404a738d974170a95f0da)
- React / Next.js
- Other Frameworks
Icon (Header Status Trigger)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=881358ba2e98d823e5f1159391cc2eee)
- React / Next.js
- Other Frameworks
Name (Header Status Trigger)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=514d5057301bc0bac4baa32ecb35dfa7)
- React / Next.js
- Other Frameworks
Arrow (Header Status Trigger)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=9ac37faf9ad8c7c297cb4087f8c5b30e)
- React / Next.js
- Other Frameworks
Content (Header Status)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=ff153039708c9e89f0c03cf93150370e)
- React / Next.js
- Other Frameworks
Item (Header Status Content)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=b5a7ac0f874cbc4a36eb77a208df7968)
- React / Next.js
- Other Frameworks
Icon (Header Status Content Item)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=1373f271afcf048ff41853cc02f07f33)
- React / Next.js
- Other Frameworks
Name (Header Status Content Item)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=936c09200bedb3853507968d3f9418f0)
- React / Next.js
- Other Frameworks
Priority (Header)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=7f3e41fa47957b231d43a0f246c42827)
- React / Next.js
- Other Frameworks
Trigger (Header Priority)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=ab838e039b8f11423792eb196205fc11)
- React / Next.js
- Other Frameworks
Icon (Header Priority Trigger)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=3422f7b2b815124ad570c0054d3441f8)
- React / Next.js
- Other Frameworks
Name (Header Priority Trigger)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=0ba4c3a0a48da4595a1a189e6dfbae37)
- React / Next.js
- Other Frameworks
Arrow (Header Priority Trigger)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=aa9bc78a6af4ebf32413caff0f295b17)
- React / Next.js
- Other Frameworks
Content (Header Priority)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=9c33296d7babdd2b467c4bfcb621e4c8)
- React / Next.js
- Other Frameworks
Item (Header Priority Content)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=1906c8a05b54cc4d064ee247828eb824)
- React / Next.js
- Other Frameworks
Icon (Header Priority Content Item)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=c6df74e0c107d8e7ccc7618826d95c3f)
- React / Next.js
- Other Frameworks
Name (Header Priority Content Item)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=aa0ada111467b5ae591df65ae78c6b51)
- React / Next.js
- Other Frameworks
Tick (Header Priority Content Item)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=a5601807c4025e42291569ad1733daa4)
- React / Next.js
- Other Frameworks
Options (Header)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=9452b4100b750c2661fbe4bfb00943cd)
- React / Next.js
- Other Frameworks
Trigger (Header Options)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=a21fbb36d8de6eb3a0c801ad86e7eb2f)
- React / Next.js
- Other Frameworks
Content (Header Options)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=8a52449b60fb24f48962543d59bf2fb4)
- React / Next.js
- Other Frameworks
Make Private (Header Options Content)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=0516d89b6ab6df9abafde146743faa53)
- React / Next.js
- Other Frameworks
Enable (Header Options Content Make Private)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=a409b7faaf9a793c22bfb01cb80e2a5a)
- React / Next.js
- Other Frameworks
Disable (Header Options Content Make Private)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=e1f61d8806c8d4a4d5db06dfd2120fb8)
- React / Next.js
- Other Frameworks
Assign (Header Options Content)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=e08752fe16b93ca0b13d21c50ba83e9f)
- React / Next.js
- Other Frameworks
Edit (Header Options Content)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=8b2be2b55eec2b925265f6a275c562f8)
- React / Next.js
- Other Frameworks
Delete (Header Options Content)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=3964289444d500a39cbdf9bfddf8d9a8)
- React / Next.js
- Other Frameworks
Thread (Header Options Content Delete)
- React / Next.js
- Other Frameworks
Comment (Header Options Content Delete)
- React / Next.js
- Other Frameworks
Notification (Header Options Content)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=66d3c84f562c82a041a211c5af25f246)
- React / Next.js
- Other Frameworks
Subscribe (Header Options Content Notification)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=6eb5817cc362a6678dde7648d7647021)
- React / Next.js
- Other Frameworks
Unsubscribe (Header Options Content Notification)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=9ce682ca90f55c2f15ff02f674f11647)
- React / Next.js
- Other Frameworks
Copy Link (Header)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=fbf09bba5b0e72eca1993cd4d7097f46)
- React / Next.js
- Other Frameworks
Resolve Button (Header)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=cc78efb60985896f3833dd6dec886489)
- React / Next.js
- Other Frameworks
Custom Annotation Dropdown (Header)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=a17bf04fcbbf25931a88e7bb43d0f8f1)
- React / Next.js
- Other Frameworks
Trigger (Header Custom Annotation Dropdown)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=0e7c14be51e89f19aae6b58ef2e7ff53)
- React / Next.js
- Other Frameworks
List (Header Custom Annotation Dropdown Trigger)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=ce88b2e90d0eac0e61cd19c6ab8ec193)
- React / Next.js
- Other Frameworks
Item (Header Custom Annotation Dropdown Trigger List)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=ce88b2e90d0eac0e61cd19c6ab8ec193)
- React / Next.js
- Other Frameworks
Remaining Count (Header Custom Annotation Dropdown Trigger)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=7131de0cfad834fb4cf273be0ae58048)
- React / Next.js
- Other Frameworks
Placeholder (Header Custom Annotation Dropdown Trigger)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=7c3ff26befc5a239933c3039a7da5653)
- React / Next.js
- Other Frameworks
Arrow (Header Custom Annotation Dropdown Trigger)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=189a367b3afa11226b20e6ae0376ff3c)
- React / Next.js
- Other Frameworks
Content (Header Custom Annotation Dropdown)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=b393e02617bc7dbd067a6c5be12f0b02)
- React / Next.js
- Other Frameworks
Item (Header Custom Annotation Dropdown Content)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=71effc4645fcf806db5e07bf3ef312fc)
- React / Next.js
- Other Frameworks
Label (Header Custom Annotation Dropdown Content Item)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=49f69f6652be8f2483978029bd9605f3)
- React / Next.js
- Other Frameworks
Icon (Header Custom Annotation Dropdown Content Item)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=e185e37b99070e1eadd182a5b4cbd11f)
- React / Next.js
- Other Frameworks
Comment Index (Header)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=761e53b7424a49fcb0a5eb75983c21dd)
- React / Next.js
- Other Frameworks
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.- React / Next.js
- Other Frameworks
Comment Category (Header)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=ef22e8aa3cc3559eb0e2615e64c5e66a)
- React / Next.js
- Other Frameworks
Comment Suggestion Status (Header)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=4a3495083bca62d4df42965e60a922b7)
- React / Next.js
- Other Frameworks
Navigation Button (Header)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=634215731ce1295b36c5c0dc4237b7d7)
- React / Next.js
- Other Frameworks
Private Badge

- React / Next.js
- Other Frameworks
Body

- React / Next.js
- Other Frameworks
Threads (Body)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=92adcf86083b4f1ce1cb5d1a62dfc53b)
- React / Next.js
- Other Frameworks
Thread Card (Body Threads)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=a6b802a4e2bae90f82f7b05b30081f1d)
- React / Next.js
- Other Frameworks
Avatar (Body Threads Thread Card)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=b19aabdbe6ae6b69ef62080c7b3104e6)
- React / Next.js
- Other Frameworks
Name (Body Threads Thread Card)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=c8d9bc2f3cf22656db7084fce2372744)
- React / Next.js
- Other Frameworks
Unread (Body Threads Thread Card)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=bd4ffb6ec34fb8d1401bc0ecfb611992)
- React / Next.js
- Other Frameworks
Seen Dropdown (Body Threads Thread Card)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=5fbf2b16c6e8a26c68241ff5dc5174e6)
- React / Next.js
- Other Frameworks
Trigger (Body Threads Thread Card Seen Dropdown)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=fdfcef2d023cc5bcb1265642d237a442)
- React / Next.js
- Other Frameworks
Content (Body Threads Thread Card Seen Dropdown)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=8fa30559d2c33d3b8b772762cc686263)
- React / Next.js
- Other Frameworks
Title (Body Threads Thread Card Seen Dropdown Content)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=427ef7d49b9df4e34f5073561d14d873)
- React / Next.js
- Other Frameworks
Items (Body Threads Thread Card Seen Dropdown Content)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=793d28194c98e84394f8c82d89f7d6dc)
- React / Next.js
- Other Frameworks
Item (Body Threads Thread Card Seen Dropdown Content Items)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=fca98407341af48443fdd12e69344300)
- React / Next.js
- Other Frameworks
Time (Body Threads Thread Card Seen Dropdown Content Items Item)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=db8cd1e45e32a50a7af419c0cbb722aa)
- React / Next.js
- Other Frameworks
Name (Body Threads Thread Card Seen Dropdown Content Items Item)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=5902d911308bbc80d349be6ae5c41bd7)
- React / Next.js
- Other Frameworks
Avatar (Body Threads Thread Card Seen Dropdown Content Items Item)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=ad07a02dc35454fee7eb76f7e8a7d759)
- React / Next.js
- Other Frameworks
Time (Body Threads Thread Card)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=4e8e256486ef4cc84a61b8260561a001)
- React / Next.js
- Other Frameworks
Device Type (Body Threads Thread Card)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=f03a17067d0f92d901937c82bc9a6fab)
- React / Next.js
- Other Frameworks
Edited (Body Threads Thread Card)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=f687d776e9dbe87bb56f37ead6b95000)
- React / Next.js
- Other Frameworks
Options (Body Threads Thread Card)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=456c2fd5416ead98e0df9eb6b199c207)
- React / Next.js
- Other Frameworks
Trigger (Body Threads Thread Card Options)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=791032c17c309fc14944152f8844c77c)
- React / Next.js
- Other Frameworks
Content (Body Threads Thread Card Options)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=c82c2e39f127d38b93dca7d2a82b9951)
- React / Next.js
- Other Frameworks
Edit (Body Threads Thread Card Options Content)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=8974aace9ed4d8abf260d53eb53ac5ad)
- React / Next.js
- Other Frameworks
Delete (Body Threads Thread Card Options Content)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=89735013a02ecae0e74545525131830a)
- React / Next.js
- Other Frameworks
Thread (Body Threads Thread Card Options Content Delete)
- React / Next.js
- Other Frameworks
Comment (Body Threads Thread Card Options Content Delete)
- React / Next.js
- Other Frameworks
Message (Body Threads Thread Card)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=fd62d8bcf7b68cc4c194450f17bd650a)
- React / Next.js
- Other Frameworks
Reaction Tool (Body Threads Thread Card)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=aaf9c12a223b6d0a040467c266b2f298)
- React / Next.js
- Other Frameworks
Reactions (Body Threads Thread Card)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=260fdbc7cccba96e89a0126a12b45e4b)
- React / Next.js
- Other Frameworks
Attachments (Body Threads Thread Card)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=a58fcfd2897691128f32ecfc67728e30)
- React / Next.js
- Other Frameworks
Image (Body Threads Thread Card Attachments)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=f95ad6093576f909fbc8369a1b3dffbf)
- React / Next.js
- Other Frameworks
Preview (Body Threads Thread Card Attachments Image)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=adfd7cb8750345f73416119b2bf23774)
- React / Next.js
- Other Frameworks
Delete (Body Threads Thread Card Attachments Image)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=cf43b48613c3bfb143e971a0bd79f553)
- React / Next.js
- Other Frameworks
Download (Body Threads Thread Card Attachments Image)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=f6014813860807740bccfca724299a85)
- React / Next.js
- Other Frameworks
Other (Body Threads Thread Card Attachments)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=c80a08f1a6edb7942e4d671ede34c27d)
- React / Next.js
- Other Frameworks
Delete (Body Threads Thread Card Attachments Other)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=6879d8b6b077e1c7b8c4ee854199fb20)
- React / Next.js
- Other Frameworks
Download (Body Threads Thread Card Attachments Other)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=aa7918f577f25647e7d4e5c008a3aeed)
- React / Next.js
- Other Frameworks
Icon (Body Threads Thread Card Attachments Other)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=15b2b652460b4863dbfa27e4fd1da0d8)
- React / Next.js
- Other Frameworks
Name (Body Threads Thread Card Attachments Other)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=f89d84ebb000f4a9c2e1f071033b0d59)
- React / Next.js
- Other Frameworks
Size (Body Threads Thread Card Attachments Other)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=e7643e8c0219ef6d98e979e335ab5de4)
- React / Next.js
- Other Frameworks
Recordings (Body Threads Thread Card)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=281d948ef02ac809df40d4f00268746b)
- React / Next.js
- Other Frameworks
Autocomplete Chip Tooltip (Body Threads Thread Card)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=795d7eaaa55db39a5c4611a13163b644)
- React / Next.js
- Other Frameworks
Icon (Body Threads Thread Card Autocomplete Chip Tooltip)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=4b3f7c1cc12c97af6c408538d937fd5b)
- React / Next.js
- Other Frameworks
Name (Body Threads Thread Card Autocomplete Chip Tooltip)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=349fadb6f0365f2fd6e0511ea051dbcc)
- React / Next.js
- Other Frameworks
Description (Body Threads Thread Card Autocomplete Chip Tooltip)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=4cf4118868c42c95032ba6f7208aab67)
- React / Next.js
- Other Frameworks
Reactions Panel (Body Threads Thread Card)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=22cbadec5556d1893b1b93301366cadc)
- React / Next.js
- Other Frameworks
Items (Body Threads Thread Card Reactions Panel)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=393c719dbc9a90405632db48adda2b09)
- React / Next.js
- Other Frameworks
Item (Body Threads Thread Card Reactions Panel Items)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=a1b25ddd63748f8741ced7909f8968b6)
- React / Next.js
- Other Frameworks
Emoji (Body Threads Thread Card Reactions Panel Items Item)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=652132ebf168511aeb78cdd4427e21ce)
- React / Next.js
- Other Frameworks
Reaction Pin (Body Threads Thread Card)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=fbc11f0f154796c12665ae61fffd8377)
- React / Next.js
- Other Frameworks
Emoji (Body Threads Thread Card Reaction Pin)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=e7bcbeaeebfe23471610192c17f632e5)
- React / Next.js
- Other Frameworks
Count (Body Threads Thread Card Reaction Pin)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=9e75de6b7691133c5ac530d93b2a45bc)
- React / Next.js
- Other Frameworks
Reaction Pin Tooltip (Body Threads Thread Card)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=02c7a6023b0765fa4b0f583f8084370a)
- React / Next.js
- Other Frameworks
Users (Body Threads Thread Card Reaction Pin Tooltip)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=67241b3c119150c344fdd895bfd2cc1c)
- React / Next.js
- Other Frameworks
User (Body Threads Thread Card Reaction Pin Tooltip Users)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=052f51c49cdb44666f2a39d48d8dc3e6)
- React / Next.js
- Other Frameworks
Avatar (Body Threads Thread Card Reaction Pin Tooltip Users User)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=165e75f1f7d252c31fe8ee44cf1a2e26)
- React / Next.js
- Other Frameworks
Name (Body Threads Thread Card Reaction Pin Tooltip Users User)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=15e1a1b3fe79aecd5780824a38a6b04b)
- React / Next.js
- Other Frameworks
Reaction Tool (Body Threads Thread Card)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=aaf9c12a223b6d0a040467c266b2f298)
- React / Next.js
- Other Frameworks
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.- React / Next.js
- Other Frameworks
MoreReply (Body Threads)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=4af3a57b028bab4d17ca9cbc2722762d)
- React / Next.js
- Other Frameworks
Reply Avatars (Body)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=760d9b64e290b4949e7558ce0f5c5506)
- React / Next.js
- Other Frameworks
List (Body Reply Avatars)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=19f3923f8f130ae3556a90393e16f933)
- React / Next.js
- Other Frameworks
Item (Body Reply Avatars List)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=952ef1cba5420ce7a7a1b300819334c2)
- React / Next.js
- Other Frameworks
Remaining Count (Body Reply Avatars)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=08443c0dc604d59883452692285fa666)
- React / Next.js
- Other Frameworks
Toggle Reply (Body)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=f7ecacd5a45a9979fe936e5abc676697)
- React / Next.js
- Other Frameworks
Icon (Body Toggle Reply)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=c2af8fc746c793205a00c9613d9a5e47)
- React / Next.js
- Other Frameworks
Count (Body Toggle Reply)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=bea5ce45d268ecc6fe8596681effb805)
- React / Next.js
- Other Frameworks
Text (Body Toggle Reply)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=3b5fb03fe7b1f8a9ced96db0fdf30fb3)
- React / Next.js
- Other Frameworks
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.- React / Next.js
- Other Frameworks
Composer

- React / Next.js
- Other Frameworks
Avatar (Composer)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=ab1c48b29bea9af3140120c9bad8852a)
- React / Next.js
- Other Frameworks
Attachments (Composer)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=d0dae21e5d631a4f49cbba6a4d256ff9)
- React / Next.js
- Other Frameworks
Selected (Composer Attachments)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=f431e624edbb4cbda7016bba282cd82b)
- React / Next.js
- Other Frameworks
Image (Composer Attachments Selected)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=24ebcd0fcc600f0f2c87315c28b8cfc6)
- React / Next.js
- Other Frameworks
Other (Composer Attachments Selected)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=0dbf7296cc69ba2748a74d8c32784c05)
- React / Next.js
- Other Frameworks
Invalid (Composer Attachments)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=e79d8ba08511d5148657eda647b47f14)
- React / Next.js
- Other Frameworks
Item (Composer Attachments Invalid)
- React / Next.js
- Other Frameworks
Recordings (Composer)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=7fbe0065f1f8e1e19efad937283a2a22)
- React / Next.js
- Other Frameworks
Input (Composer)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=33e47748e24c55a9fcc4991bd3b57980)
- React / Next.js
- Other Frameworks
Action Button (Composer)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=324a7066c636bf93bd09ed5a769753e7)
- React / Next.js
- Other Frameworks
Assign User (Composer)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=cb91db82e189bbddbdb06832908f59e9)
- React / Next.js
- Other Frameworks
Autocomplete Option (Composer)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=2b265d465cff1f1e8c2eaafeb98771b4)
- React / Next.js
- Other Frameworks
Icon (Composer Autocomplete Option)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=3d68c247287d354a74c1de7ad92414d7)
- React / Next.js
- Other Frameworks
Name (Composer Autocomplete Option)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=2ae93a65726cdf02d89232deedb57f3f)
- React / Next.js
- Other Frameworks
Description (Composer Autocomplete Option)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=e39ef81a8ddcd0fe8ac3e4fe26dbddc4)
- React / Next.js
- Other Frameworks
Error Icon (Composer Autocomplete Option)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=b7978fad684c077b12519c4e2e5bb315)
- React / Next.js
- Other Frameworks
Autocomplete Group Option (Composer)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=5f05b218b694299b5cf9cc5de32b290b)
- React / Next.js
- Other Frameworks
All Comment

- React / Next.js
- Other Frameworks
Approve

- React / Next.js
- Other Frameworks
Sign In

- React / Next.js
- Other Frameworks
Upgrade

- React / Next.js
- Other Frameworks
Suggestion Action

- React / Next.js
- Other Frameworks
Accept (Suggestion Action)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=936e71735aca68925513d8e4d3e4b904)
- React / Next.js
- Other Frameworks
Reject (Suggestion Action)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=efa7664a01398002cbbd2618be3664c7)
- React / Next.js
- Other Frameworks
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
- React / Next.js
- Other Frameworks
Example
API methods
Dark Mode

Default: false
Below are the examples to enable Dark Mode for comments dialog:
- React / Next.js
- Other Frameworks
Example
API methods
Pre-defined Variants
The Comment Dialog has 2 pre-defined variants:dialog
: this will customize the Comment Dialog only within Pin, Area, and Text Commentssidebar
: this will customize the Comment Dialog only within Sidebar comments
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.
- React / Next.js
- Other Frameworks
React / Next.js