> ## 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 Sidebar v1 Wireframes > Wireframe components for building custom Comment Sidebar v1 UIs — override the header, filters, threads list, and search panel with your own HTML. We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components. ## Overview ```jsx theme={null} ``` ```html theme={null} ``` ## Skeleton ```jsx theme={null} ``` ```html theme={null} ``` ## Panel ```jsx theme={null} ``` ```html theme={null} ``` ### Header (Panel) ```jsx theme={null} ``` ```html theme={null} ``` #### FullscreenButton (Panel Header) Button to toggle full-screen mode for the Comments Sidebar. This component only appears when full-screen mode is enabled via the `fullScreen` prop or API method. Clicking it allows users to expand the sidebar to fill the entire viewport or return to normal mode. ```jsx theme={null} ``` ```html theme={null} ``` #### CloseButton (Panel Header) ```jsx theme={null} ``` ```html theme={null} ``` #### Search (Panel Header) ```jsx theme={null} ``` ```html theme={null} ``` #### ResetFilterButton (Panel Header) ```jsx theme={null} ``` ```html theme={null} ``` #### Status (Panel Header) ```jsx theme={null} ``` ```html theme={null} ``` ##### **Trigger (Panel Header Status)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Header Status Trigger)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Arrow (Panel Header Status Trigger)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Indicator (Panel Header Status Trigger)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Content (Panel Header Status)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Header Status Content)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Icon (Panel Header Status Content Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Header Status Content Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Header Status Content Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Header Status Content Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Header Status Content Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Header Status Content Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` #### LocationFilterDropdown (Panel Header) ```jsx theme={null} ``` ```html theme={null} ``` ##### **Trigger (Panel Header LocationFilterDropdown)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Label (Panel Header LocationFilterDropdown Trigger)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Content (Panel Header LocationFilterDropdown)** ```jsx theme={null} ``` ```html theme={null} ``` #### MinimalFilterDropdown (Panel Header) ```jsx theme={null} ``` ```html theme={null} ``` ##### **Trigger (Panel Header MinimalFilterDropdown)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Content (Panel Header MinimalFilterDropdown)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **SortDate (Panel Header MinimalFilterDropdown Content)** ```jsx theme={null} Sort date ``` ```html theme={null} Sort by date ``` ##### **SelectedIcon (Panel Header MinimalFilterDropdown Content SortDate)** ```jsx theme={null} Sort date ``` ```html theme={null} Sort by date ``` ##### **SortUnread (Panel Header MinimalFilterDropdown Content)** ```jsx theme={null} Sort unread ``` ```html theme={null} Sort by unread ``` ##### **SelectedIcon (Panel Header MinimalFilterDropdown Content SortUnread)** ```jsx theme={null} Sort unread ``` ```html theme={null} Sort by unread ``` ##### **FilterAll (Panel Header MinimalFilterDropdown Content)** ```jsx theme={null} Filter All ``` ```html theme={null} Unread or Read ``` ##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterAll)** ```jsx theme={null} Filter All ``` ```html theme={null} Unread or Read ``` ##### **FilterUnread (Panel Header MinimalFilterDropdown Content)** ```jsx theme={null} Filter unread ``` ```html theme={null} Unread only ``` ##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterUnread)** ```jsx theme={null} Filter unread ``` ```html theme={null} Unread only ``` ##### **FilterRead (Panel Header MinimalFilterDropdown Content)** ```jsx theme={null} Filter read ``` ```html theme={null} Read only ``` ##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterRead)** ```jsx theme={null} Filter read ``` ```html theme={null} Read only ``` ##### **FilterResolved (Panel Header MinimalFilterDropdown Content)** ```jsx theme={null} Filter resolved ``` ```html theme={null} Resolved ``` ##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterResolved)** ```jsx theme={null} Filter resolved ``` ```html theme={null} Resolved ``` ##### **FilterOpen (Panel Header MinimalFilterDropdown Content)** ```jsx theme={null} Filter open ``` ```html theme={null} Open only ``` ##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterOpen)** ```jsx theme={null} Filter open ``` ```html theme={null} Open only ``` ##### **FilterReset (Panel Header MinimalFilterDropdown Content)** ```jsx theme={null} Reset filters ``` ```html theme={null} Reset filters ``` ##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterReset)** ```jsx theme={null} Reset filters ``` ```html theme={null} Reset filters ``` #### MinimalActionsDropdown (Panel Header) ```jsx theme={null} ``` ```html theme={null} ``` ##### **Trigger (Panel Header MinimalActionsDropdown)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Content (Panel Header MinimalActionsDropdown)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **MarkAllRead (Panel Header MinimalActionsDropdown Content)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **MarkAllResolved (Panel Header MinimalActionsDropdown Content)** ```jsx theme={null} ``` ```html theme={null} ``` #### DocumentFilterDropdown (Panel Header) ```jsx theme={null} ``` ```html theme={null} ``` ##### **Trigger (Panel Header DocumentFilterDropdown)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Content (Panel Header DocumentFilterDropdown)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Document (Panel Header DocumentFilterDropdown Content)** ```jsx theme={null} ``` ```html theme={null} ``` #### FilterButton (Panel Header) ```jsx theme={null} ``` ```html theme={null} ``` ### Filter (Panel) ```jsx theme={null} ``` ```html theme={null} ``` #### Title (Panel Filter) ```jsx theme={null} ``` ```html theme={null} ``` #### CloseButton (Panel Filter) ```jsx theme={null} ``` ```html theme={null} ``` #### Location (Panel Filter) Location filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Location)** Name component within the location filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Search (Panel Filter Location)** Search component within the location filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Tags (Panel Filter Location Search)** Tags component within the location filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Location Search Tags)** Item component within the location filter search tags ```jsx theme={null} ``` ```html theme={null} ``` ##### **HiddenCount (Panel Filter Location Search)** Hidden count component within the location filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Input (Panel Filter Location Search)** Input component within the location filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **DropdownIcon (Panel Filter Location Search)** Dropdown icon component within the location filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Location)** Item component within the location filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter Location Item)** Checkbox component within the location filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter Location Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter Location Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Location Item)** Name component within the location filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter Location Item)** Count component within the location filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **ViewAll (Panel Filter Location)** View all component within the location filter ```jsx theme={null} ``` ```html theme={null} ``` #### Document (Panel Filter) Document filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Document)** Name component within the document filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Search (Panel Filter Document)** Search component within the document filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Tags (Panel Filter Document Search)** Tags component within the document filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Document Search Tags)** Item component within the document filter search tags ```jsx theme={null} ``` ```html theme={null} ``` ##### **HiddenCount (Panel Filter Document Search)** Hidden count component within the document filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Input (Panel Filter Document Search)** Input component within the document filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **DropdownIcon (Panel Filter Document Search)** Dropdown icon component within the document filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Document)** Item component within the document filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter Document Item)** Checkbox component within the document filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter Document Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter Document Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Document Item)** Name component within the document filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter Document Item)** Count component within the document filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **ViewAll (Panel Filter Document)** View all component within the document filter ```jsx theme={null} ``` ```html theme={null} ``` #### Involved (Panel Filter) Involved filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Involved)** Name component within the involved filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Search (Panel Filter Involved)** Search component within the involved filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Tags (Panel Filter Involved Search)** Tags component within the involved filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Involved Search Tags)** Item component within the involved filter search tags ```jsx theme={null} ``` ```html theme={null} ``` ##### **HiddenCount (Panel Filter Involved Search)** Hidden count component within the involved filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Input (Panel Filter Involved Search)** Input component within the involved filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **DropdownIcon (Panel Filter Involved Search)** Dropdown icon component within the involved filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Involved)** Item component within the involved filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter Involved Item)** Checkbox component within the involved filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter Involved Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter Involved Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Involved Item)** Name component within the involved filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter Involved Item)** Count component within the involved filter item ```jsx theme={null} ``` ```html theme={null} ``` #### People (Panel Filter) People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter People)** People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Search (Panel Filter People)** People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Tags (Panel Filter People Search)** People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter People Search Tags)** People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter People Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Close (Panel Filter People Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **HiddenCount (Panel Filter People Search)** People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Input (Panel Filter People Search)** People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **DropdownIcon (Panel Filter People Search)** People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter People)** People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter People Item)** People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter People Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter People Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter People Item)** People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter People Item)** People filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` #### Tagged (Panel Filter) Tagged filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Tagged)** Name component within the tagged filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Search (Panel Filter Tagged)** Search component within the tagged filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Tags (Panel Filter Tagged Search)** Tags component within the tagged filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Tagged Search Tags)** Item component within the tagged filter search tags ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Tagged Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Close (Panel Filter Tagged Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **HiddenCount (Panel Filter Tagged Search)** Hidden count component within the tagged filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Input (Panel Filter Tagged Search)** Input component within the tagged filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **DropdownIcon (Panel Filter Tagged Search)** Dropdown icon component within the tagged filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Tagged)** Item component within the tagged filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter Tagged Item)** Checkbox component within the tagged filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter Tagged Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter Tagged Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Tagged Item)** Name component within the tagged filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter Tagged Item)** Count component within the tagged filter item ```jsx theme={null} ``` ```html theme={null} ``` #### Assigned (Panel Filter) Assigned filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Assigned)** Name component within the assigned filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Search (Panel Filter Assigned)** Search component within the assigned filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Tags (Panel Filter Assigned Search)** Tags component within the assigned filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Assigned Search Tags)** Item component within the assigned filter search tags ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Assigned Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Close (Panel Filter Assigned Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **HiddenCount (Panel Filter Assigned Search)** Hidden count component within the assigned filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Input (Panel Filter Assigned Search)** Input component within the assigned filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **DropdownIcon (Panel Filter Assigned Search)** Dropdown icon component within the assigned filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Assigned)** Item component within the assigned filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter Assigned Item)** Checkbox component within the assigned filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter Assigned Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter Assigned Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Assigned Item)** Name component within the assigned filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter Assigned Item)** Count component within the assigned filter item ```jsx theme={null} ``` ```html theme={null} ``` #### Custom (Panel Filter) Custom filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Custom)** Name component within the custom filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Search (Panel Filter Custom)** Search component within the custom filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Tags (Panel Filter Custom Search)** Tags component within the custom filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Custom Search Tags)** Item component within the custom filter search tags ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Custom Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Close (Panel Filter Custom Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **HiddenCount (Panel Filter Custom Search)** Hidden count component within the custom filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Input (Panel Filter Custom Search)** Input component within the custom filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **DropdownIcon (Panel Filter Custom Search)** Dropdown icon component within the custom filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Custom)** Item component within the custom filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter Custom Item)** Checkbox component within the custom filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter Custom Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter Custom Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Custom Item)** Name component within the custom filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter Custom Item)** Count component within the custom filter item ```jsx theme={null} ``` ```html theme={null} ``` #### Category (Panel Filter) Category filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Category)** Name component within the category filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Search (Panel Filter Category)** Search component within the category filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Tags (Panel Filter Category Search)** Tags component within the category filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Category Search Tags)** Item component within the category filter search tags ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Category Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Close (Panel Filter Category Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **HiddenCount (Panel Filter Category Search)** Hidden count component within the category filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Input (Panel Filter Category Search)** Input component within the category filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **DropdownIcon (Panel Filter Category Search)** Dropdown icon component within the category filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Category)** Item component within the category filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter Category Item)** Checkbox component within the category filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter Category Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter Category Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Category Item)** Name component within the category filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter Category Item)** Count component within the category filter item ```jsx theme={null} ``` ```html theme={null} ``` #### Priority (Panel Filter) Priority filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Priority)** Name component within the priority filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Search (Panel Filter Priority)** Search component within the priority filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Tags (Panel Filter Priority Search)** Tags component within the priority filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Priority Search Tags)** Item component within the priority filter search tags ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Priority Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Close (Panel Filter Priority Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **HiddenCount (Panel Filter Priority Search)** Hidden count component within the priority filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Input (Panel Filter Priority Search)** Input component within the priority filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **DropdownIcon (Panel Filter Priority Search)** Dropdown icon component within the priority filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Priority)** Item component within the priority filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter Priority Item)** Checkbox component within the priority filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter Priority Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter Priority Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Priority Item)** Name component within the priority filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter Priority Item)** Count component within the priority filter item ```jsx theme={null} ``` ```html theme={null} ``` #### Status (Panel Filter) Status filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Status)** Name component within the status filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Search (Panel Filter Status)** Search component within the status filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Tags (Panel Filter Status Search)** Tags component within the status filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Status Search Tags)** Item component within the status filter search tags ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Status Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Close (Panel Filter Status Search Tags Item)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **HiddenCount (Panel Filter Status Search)** Hidden count component within the status filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Input (Panel Filter Status Search)** Input component within the status filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **DropdownIcon (Panel Filter Status Search)** Dropdown icon component within the status filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Status)** Item component within the status filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter Status Item)** Checkbox component within the status filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter Status Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter Status Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Status Item)** Name component within the status filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter Status Item)** Count component within the status filter item ```jsx theme={null} ``` ```html theme={null} ``` #### CommentType (Panel Filter) CommentType filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter CommentType)** Name component within the commentType filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter CommentType)** Item component within the commentType filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter CommentType Item)** Checkbox component within the commentType filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter CommentType Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter CommentType Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter CommentType Item)** Name component within the commentType filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter CommentType Item)** Count component within the commentType filter item ```jsx theme={null} ``` ```html theme={null} ``` #### Versions (Panel Filter) Versions filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Versions)** Name component within the versions filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Search (Panel Filter Versions)** Search component within the versions filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Tags (Panel Filter Versions Search)** Tags component within the versions filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Versions Search Tags)** Item component within the versions filter search tags ```jsx theme={null} ``` ```html theme={null} ``` ###### **Name (Panel Filter Versions Search Tags Item)** Name component within the versions filter search tags item ```jsx theme={null} ``` ```html theme={null} ``` ###### **Close (Panel Filter Versions Search Tags Item)** Close component within the versions filter search tags item ```jsx theme={null} ``` ```html theme={null} ``` ##### **HiddenCount (Panel Filter Versions Search)** Hidden count component within the versions filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Input (Panel Filter Versions Search)** Input component within the versions filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **DropdownIcon (Panel Filter Versions Search)** Dropdown icon component within the versions filter search ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter Versions)** Item component within the versions filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter Versions Item)** Checkbox component within the versions filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter Versions Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter Versions Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter Versions Item)** Name component within the versions filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter Versions Item)** Count component within the versions filter item ```jsx theme={null} ``` ```html theme={null} ``` #### GroupBy (Panel Filter) GroupBy filter component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter GroupBy)** Name component within the groupBy filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Item (Panel Filter GroupBy)** Item component within the groupBy filter ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checkbox (Panel Filter GroupBy Item)** Checkbox component within the groupBy filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Filter GroupBy Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Filter GroupBy Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel Filter GroupBy Item)** Name component within the groupBy filter item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel Filter GroupBy Item)** Count component within the groupBy filter item ```jsx theme={null} ``` ```html theme={null} ``` #### ResetButton (Panel Filter) Reset button component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` #### DoneButton (Panel Filter) Done button component in the comments sidebar panel filter ```jsx theme={null} ``` ```html theme={null} ``` If you want to change the filters globally across all filters in the sidebar, customize the shared filter option item (shown below) once and reuse it. Use `VeltCommentsSidebarWireframe.Filter.Item` (and its `Checkbox`, `Name`, and `Count` subcomponents) to apply changes across all filters. ### Item (Panel) Item component in the comments sidebar panel ```jsx theme={null} ``` ```html theme={null} ``` #### Checkbox (Panel Item) Checkbox component in the comments sidebar panel item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Checked (Panel Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` ##### **Unchecked (Panel Item Checkbox)** ```jsx theme={null} ``` ```html theme={null} ``` #### Name (Panel Item) Name component in the comments sidebar panel item ```jsx theme={null} ``` ```html theme={null} ``` #### Count (Panel Item) Count component in the comments sidebar panel item ```jsx theme={null} ``` ```html theme={null} ``` ### List (Panel) List component in the comments sidebar panel ```jsx theme={null} ``` ```html theme={null} ``` #### Item (Panel List) Item component in the comments sidebar panel list ```jsx theme={null} ``` ```html theme={null} ``` ##### **Group (Panel List Item)** Group component in the comments sidebar panel list item ```jsx theme={null} ``` ```html theme={null} ``` ##### **Name (Panel List Item Group)** Name component in the comments sidebar panel list item group ```jsx theme={null} ``` ```html theme={null} ``` ##### **Count (Panel List Item Group)** Count component in the comments sidebar panel list item group ```jsx theme={null} ``` ```html theme={null} ``` ##### **Arrow (Panel List Item Group)** Arrow component in the comments sidebar panel list item group ```jsx theme={null} ``` ```html theme={null} ``` ##### **Annotation (Panel List Item)** Annotation component in the comments sidebar panel list item ```jsx theme={null} ``` ```html theme={null} ``` ### EmptyPlaceholder (Panel) Empty placeholder component in the comments sidebar panel ```jsx theme={null} ``` ```html theme={null} ``` ### PageModeComposer (Panel) ```jsx theme={null} ``` ```html theme={null} ``` ## FocusedThread ```jsx theme={null} ``` ```html theme={null} ``` ### BackButton (FocusedThread) ```jsx theme={null} ``` ```html theme={null} ``` ### DialogContainer (FocusedThread) ```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` ##### **Example** ```jsx theme={null} ``` ##### **API methods** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableSidebarShadowDOM(); commentElement.disableSidebarShadowDOM(); ``` ##### **Example** ```jsx theme={null} ``` ##### **API methods** ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enableSidebarShadowDOM(); commentElement.disableSidebarShadowDOM(); ``` ### Dark Mode By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. `Default: false` To enable Dark Mode for comments sidebar: ##### **Example** ```js theme={null} ``` ##### **API methods** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableDarkMode(); commentElement.disableDarkMode(); ``` ##### **Example** ```js theme={null} ``` ##### **API methods** ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enableDarkMode(); commentElement.disableDarkMode(); ``` ## Variants Here are the variants that you can use in Comments Sidebar: * `variant`: This is the variant for the entire Comments Sidebar. * `dialogVariant`: This is the variant for the Comment Dialog that appears in the Comments Sidebar. * `pageModeComposerVariant`: This is the variant for the Comment Composer that appears in the Comments Sidebar in page mode. * `focusedThreadDialogVariant`: This is the variant for the Comment Dialog that appears when a focused thread mode is enabled. ```jsx React / Next.js theme={null} ``` ```jsx Other Frameworks theme={null} ```