> ## 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 Pin Wireframes
> Wireframe components for building custom Comment Pin interfaces with maximum flexibility.
> [!NOTE]
>
> We recommend that you familiarize yourself with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.
## VeltCommentPinWireframe
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
## GhostCommentIndicator
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Index
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Number
The annotation number displays on comment pins, 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}
>
>
>
> ```
## PrivateCommentIndicator
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Triangle
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## UnreadCommentIndicator
> [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
>
> **Using Props:**
>
> ```jsx theme={null}
>
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const commentElement = client.getCommentElement();
> commentElement.enablePinShadowDOM();
> commentElement.disablePinShadowDOM();
> ```
> [tab] Other Frameworks
>
> **Using Props:**
>
> ```jsx theme={null}
>
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const commentElement = Velt.getCommentElement();
> commentElement.enablePinShadowDOM();
> commentElement.disablePinShadowDOM();
> ```
### Dark Mode
By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode.
`Default: false`
> [tab] React / Next.js
>
> **Using Props:**
>
> ```js theme={null}
>
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const commentElement = client.getCommentElement();
> commentElement.enableDarkMode();
> commentElement.disableDarkMode();
> ```
> [tab] Other Frameworks
>
> **Using Props:**
>
> ```html theme={null}
>
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const commentElement = Velt.getCommentElement();
> commentElement.enableDarkMode();
> commentElement.disableDarkMode();
> ```
### Variants
* Define variants for the `Velt Comment Pin` component. This is useful for customizing how the pin looks on different elements like charts, tables, etc.
* Learn more about how to define and use variants [here](https://velt.dev/docs/ui-customization/wireframes/layout-customization.md#variants).
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.