> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-e6426361.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Comment Pin Wireframes
> Wireframe components for building custom Comment Pin UIs — override pin markers, avatars, and unread badges with your own HTML and design system.
We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
## VeltCommentPinWireframe
```jsx theme={null}
```
```html theme={null}
```
## GhostCommentIndicator
```jsx theme={null}
```
```html theme={null}
```
## Index
```jsx theme={null}
```
```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.
```jsx theme={null}
```
```html theme={null}
```
## PrivateCommentIndicator
```jsx theme={null}
```
```html theme={null}
```
## Triangle
```jsx theme={null}
```
```html theme={null}
```
## UnreadCommentIndicator
```jsx theme={null}
```
```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`
**Using Props:**
```jsx theme={null}
```
**Using API:**
```jsx theme={null}
const commentElement = client.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();
```
**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`
**Using Props:**
```js theme={null}
```
**Using API:**
```jsx theme={null}
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
```
**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](/ui-customization/layout#variants).
```jsx theme={null}
```
```html theme={null}
```