> ## 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 Composer

> [!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.

This component is a thin wrapper around the [Comment Dialog Composer](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframes.md#composer) component.

## VeltCommentComposerWireframe

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentComposerWireframe>
>     <VeltCommentDialogWireframe.Composer />
> </VeltCommentComposerWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-composer-wireframe>
>     <velt-comment-dialog-composer-wireframe></velt-comment-dialog-composer-wireframe>
> </velt-comment-composer-wireframe>
> ```

### VeltCommentDialogWireframe.Composer

You can find the wireframe for the `Comment Composer` [here](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframes.md#composer).

## 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
>
> ```jsx theme={null}
> <VeltCommentComposer shadowDom={false} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-composer shadow-dom="false"></velt-comment-composer>
> ```

### Dark Mode

`Default: false`

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentComposer darkMode={true} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-composer dark-mode="true"></velt-comment-composer>
> ```

### Variants

* Define variants for the entire Comment Composer component. This will enable you to show different Composer UI in different parts of your app.
* Alternatively, define a variant for the Comment Dialog component and use it here. This will enable you to show different Comment Dialog UI on the DOM vs here.
* 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}
> <VeltCommentComposer
>   variant="component-variant"
>   dialogVariant="dialog-variant"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-composer
>   dialog-variant="dialog-variant"
>   variant="component-variant"
> ></velt-comment-composer>
> ```


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