> ## 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 yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

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

## VeltCommentComposerWireframe

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentComposerWireframe>
        <VeltCommentDialogWireframe.Composer />
    </VeltCommentComposerWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-composer-wireframe>
        <velt-comment-dialog-composer-wireframe></velt-comment-dialog-composer-wireframe>
    </velt-comment-composer-wireframe>
    ```
  </Tab>
</Tabs>

### VeltCommentDialogWireframe.Composer

You can find the wireframe for the `Comment Composer` [here](/ui-customization/features/async/comments/comment-dialog/wireframes#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`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentComposer shadowDom={false} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-composer shadow-dom="false"></velt-comment-composer>
    ```
  </Tab>
</Tabs>

### Dark Mode

`Default: false`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentComposer darkMode={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-composer dark-mode="true"></velt-comment-composer>
    ```
  </Tab>
</Tabs>

### 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](/ui-customization/layout#variants).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentComposer
      variant="component-variant"
      dialogVariant="dialog-variant"
    />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-composer
      dialog-variant="dialog-variant"
      variant="component-variant"
    ></velt-comment-composer>
    ```
  </Tab>
</Tabs>