> ## 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.
# Inline Comments Section Wireframes
> Wireframe components for building custom Inline Comments Section 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.
## VeltInlineCommentsSectionWireframe
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
### Skeleton
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Panel
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
> ```
#### ComposerContainer
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **VeltCommentDialogWireframe.Composer**
You can find the wireframe for the `Comment Dialog Composer` [here](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframes.md#composer).
#### SortingDropdown
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Trigger**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Name**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Icon**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Content**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
#### FilterDropdown (Panel)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Trigger (Panel FilterDropdown)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Arrow (Panel FilterDropdown Trigger)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel FilterDropdown Trigger)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Content (Panel FilterDropdown)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **List (Panel FilterDropdown Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel FilterDropdown Content List)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Label (Panel FilterDropdown Content List Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Checkbox (Panel FilterDropdown Content List Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **ApplyButton (Panel FilterDropdown Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### CommentCount
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### List
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **VeltCommentDialogWireframe**
You can find the wireframe for the `Comment Dialog` [here](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframes.md).
## Pre-defined Variants
Here are the pre-defined variants:
1. `dialog-variant`: Use this to customize the `Comment Dialog` that appears within the `Inline Comments Section` component.
2. `variant`: Use this to customize the entire `Inline Comments Section` component itself.
3. `composer-variant`: Use this to customize the main Composer that appears within the `Inline Comments Section` component.
> [!NOTE]
>
> Learn more about Variants [here](https://velt.dev/docs/ui-customization/wireframes/layout-customization.md#variants)
> [tab] React / Next.js
>
> ```jsx React / Next.js theme={null}
> dialogVariant="dialog-variant-name"
> variant="inline-comment-section-variant-name"
> composerVariant="inline"
> />
> ```
> [tab] Other Frameworks
>
> ```HTML theme={null}
> dialog-variant="dialog-variant-name"
> variant="inline-comment-section-variant-name"
> composer-variant="inline"
> >
>
> ```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.