Comment Sidebar

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

Overview

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe>
        <VeltCommentsSidebarWireframe.Skeleton />
        <VeltCommentsSidebarWireframe.Panel />
        <VeltCommentsSidebarWireframe.FocusedThread />
    </VeltCommentsSidebarWireframe>
</VeltWireframe>

Skeleton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Skeleton />
</VeltWireframe>

Panel

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Panel>
      <VeltCommentsSidebarWireframe.Header>
      <VeltCommentsSidebarWireframe.Filter>
      <VeltCommentsSidebarWireframe.List>
      <VeltCommentsSidebarWireframe.EmptyPlaceholder>
      <VeltCommentsSidebarWireframe.PageModeComposer>
      <VeltCommentsSidebarWireframe.Filter.Item />
    </VeltCommentsSidebarWireframe.Panel>
</VeltWireframe>

Header (Panel)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Header>
      <VeltCommentsSidebarWireframe.FullscreenButton />
      <VeltCommentsSidebarWireframe.CloseButton />
      <VeltCommentsSidebarWireframe.Search />
      <VeltCommentsSidebarWireframe.ResetFilterButton />
      <VeltCommentsSidebarWireframe.Status />
      <VeltCommentsSidebarWireframe.LocationFilterDropdown />
      <VeltCommentsSidebarWireframe.MinimalFilterDropdown />
      <VeltCommentsSidebarWireframe.MinimalActionsDropdown />
      <VeltCommentsSidebarWireframe.DocumentFilterDropdown />
      <VeltCommentsSidebarWireframe.FilterButton />
    </VeltCommentsSidebarWireframe.Header>
</VeltWireframe>

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.

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.FullscreenButton />
</VeltWireframe>

CloseButton (Panel Header)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.CloseButton />
</VeltWireframe>

Search (Panel Header)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Search />
</VeltWireframe>

ResetFilterButton (Panel Header)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.ResetFilterButton />
</VeltWireframe>

Status (Panel Header)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status>
        <VeltCommentsSidebarWireframe.Status.Trigger />
        <VeltCommentsSidebarWireframe.Status.Content />
    </VeltCommentsSidebarWireframe.Status>
</VeltWireframe>

Trigger (Panel Header Status)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Trigger>
        <VeltCommentsSidebarWireframe.Status.Trigger.Name />
        <VeltCommentsSidebarWireframe.Status.Trigger.Arrow />
        <VeltCommentsSidebarWireframe.Status.Trigger.Indicator />
    </VeltCommentsSidebarWireframe.Status.Trigger>
</VeltWireframe>

Name (Panel Header Status Trigger)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Trigger.Name />
</VeltWireframe>

Arrow (Panel Header Status Trigger)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Trigger.Arrow />
</VeltWireframe>

Indicator (Panel Header Status Trigger)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Trigger.Indicator />
</VeltWireframe>

Content (Panel Header Status)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Content>
        <VeltCommentsSidebarWireframe.Status.Content.Item />
    </VeltCommentsSidebarWireframe.Status.Content>
</VeltWireframe>

Item (Panel Header Status Content)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Content.Item>
        <VeltCommentsSidebarWireframe.Status.Content.Item.Icon />
        <VeltCommentsSidebarWireframe.Status.Content.Item.Name />
        <VeltCommentsSidebarWireframe.Status.Content.Item.Count />
        <VeltCommentsSidebarWireframe.Status.Content.Item.Checkbox />
    </VeltCommentsSidebarWireframe.Status.Content.Item>
</VeltWireframe>

Icon (Panel Header Status Content Item)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Content.Item.Icon />
</VeltWireframe>

Name (Panel Header Status Content Item)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Content.Item.Name />
</VeltWireframe>

Count (Panel Header Status Content Item)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Content.Item.Count />
</VeltWireframe>

Checkbox (Panel Header Status Content Item)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Content.Item.Checkbox>
        <VeltCommentsSidebarWireframe.Status.Content.Item.Checkbox.Checked />
        <VeltCommentsSidebarWireframe.Status.Content.Item.Checkbox.Unchecked />
    </VeltCommentsSidebarWireframe.Status.Content.Item.Checkbox>
</VeltWireframe>

Checked (Panel Header Status Content Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Content.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Header Status Content Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Status.Content.Item.Checkbox.Unchecked />
</VeltWireframe>

LocationFilterDropdown (Panel Header)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.LocationFilterDropdown>
        <VeltCommentsSidebarWireframe.LocationFilterDropdown.Trigger />
        <VeltCommentsSidebarWireframe.LocationFilterDropdown.Content />
    </VeltCommentsSidebarWireframe.LocationFilterDropdown>
</VeltWireframe>

Trigger (Panel Header LocationFilterDropdown)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.LocationFilterDropdown.Trigger>
        <VeltCommentsSidebarWireframe.LocationFilterDropdown.Trigger.Label />
    </VeltCommentsSidebarWireframe.LocationFilterDropdown.Trigger>
</VeltWireframe>

Label (Panel Header LocationFilterDropdown Trigger)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.LocationFilterDropdown.Trigger.Label />
</VeltWireframe>

Content (Panel Header LocationFilterDropdown)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.LocationFilterDropdown.Content />
</VeltWireframe>

MinimalFilterDropdown (Panel Header)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown>
        <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Trigger />
        <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content />
    </VeltCommentsSidebarWireframe.MinimalFilterDropdown>
</VeltWireframe>

Trigger (Panel Header MinimalFilterDropdown)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Trigger />
</VeltWireframe>

Content (Panel Header MinimalFilterDropdown)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content>
        <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortDate />
        <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortUnread />
        <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterAll />
        <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterUnread />
        <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterRead />
        <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterResolved />
    </VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content>
</VeltWireframe>

SortDate (Panel Header MinimalFilterDropdown Content)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortDate>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
      Sort date
    </VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortDate>
</VeltWireframe>

SelectedIcon (Panel Header MinimalFilterDropdown Content SortDate)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
      Sort date
</VeltWireframe>

SortUnread (Panel Header MinimalFilterDropdown Content)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortUnread>
      <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
        Sort unread
    </VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortUnread>
</VeltWireframe>

SelectedIcon (Panel Header MinimalFilterDropdown Content SortUnread)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
      Sort unread
</VeltWireframe>

FilterAll (Panel Header MinimalFilterDropdown Content)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterAll>
      <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
          Filter All
    </VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterAll>
</VeltWireframe>

SelectedIcon (Panel Header MinimalFilterDropdown Content FilterAll)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
      Filter All
</VeltWireframe>

FilterUnread (Panel Header MinimalFilterDropdown Content)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterUnread>
      <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
          Filter unread
    </VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterUnread>
</VeltWireframe>

SelectedIcon (Panel Header MinimalFilterDropdown Content FilterUnread)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
      Filter unread
</VeltWireframe>

FilterRead (Panel Header MinimalFilterDropdown Content)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterRead>
      <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
          Filter read
    </VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterRead>
</VeltWireframe>

SelectedIcon (Panel Header MinimalFilterDropdown Content FilterRead)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
      Filter read
</VeltWireframe>

FilterResolved (Panel Header MinimalFilterDropdown Content)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterResolved>
      <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
          Filter resolved
    </VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterResolved>
</VeltWireframe>

SelectedIcon (Panel Header MinimalFilterDropdown Content FilterResolved)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
      Filter resolved
</VeltWireframe>

MinimalActionsDropdown (Panel Header)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalActionsDropdown>
        <VeltCommentsSidebarWireframe.MinimalActionsDropdown.Trigger />
        <VeltCommentsSidebarWireframe.MinimalActionsDropdown.Content />
    </VeltCommentsSidebarWireframe.MinimalActionsDropdown>
</VeltWireframe>

Trigger (Panel Header MinimalActionsDropdown)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalActionsDropdown.Trigger />
</VeltWireframe>

Content (Panel Header MinimalActionsDropdown)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalActionsDropdown.Content>
        <VeltCommentsSidebarWireframe.MinimalActionsDropdown.Content.MarkAllRead />
        <VeltCommentsSidebarWireframe.MinimalActionsDropdown.Content.MarkAllResolved />
    </VeltCommentsSidebarWireframe.MinimalActionsDropdown.Content>
</VeltWireframe>

MarkAllRead (Panel Header MinimalActionsDropdown Content)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalActionsDropdown.Content.MarkAllRead />
</VeltWireframe>

MarkAllResolved (Panel Header MinimalActionsDropdown Content)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.MinimalActionsDropdown.Content.MarkAllResolved />
</VeltWireframe>

DocumentFilterDropdown (Panel Header)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.DocumentFilterDropdown>
        <VeltCommentsSidebarWireframe.DocumentFilterDropdown.Trigger />
        <VeltCommentsSidebarWireframe.DocumentFilterDropdown.Content />
    </VeltCommentsSidebarWireframe.DocumentFilterDropdown>
</VeltWireframe>

Trigger (Panel Header DocumentFilterDropdown)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.DocumentFilterDropdown.Trigger />
</VeltWireframe>

Content (Panel Header DocumentFilterDropdown)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.DocumentFilterDropdown.Content>
      <VeltCommentsSidebarWireframe.Filter.Document />
    </VeltCommentsSidebarWireframe.DocumentFilterDropdown.Content>
</VeltWireframe>

Document (Panel Header DocumentFilterDropdown Content)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document />
</VeltWireframe>

FilterButton (Panel Header)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.FilterButton />
</VeltWireframe>

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter>
        <VeltCommentsSidebarWireframe.Filter.Title />
        <VeltCommentsSidebarWireframe.Filter.CloseButton />
        <VeltCommentsSidebarWireframe.Filter.Location />
        <VeltCommentsSidebarWireframe.Filter.Document />
        <VeltCommentsSidebarWireframe.Filter.Involved />
        <VeltCommentsSidebarWireframe.Filter.People />
        <VeltCommentsSidebarWireframe.Filter.Tagged />
        <VeltCommentsSidebarWireframe.Filter.Assigned />
        <VeltCommentsSidebarWireframe.Filter.Custom />
        <VeltCommentsSidebarWireframe.Filter.Category />
        <VeltCommentsSidebarWireframe.Filter.Priority />
        <VeltCommentsSidebarWireframe.Filter.Status />
        <VeltCommentsSidebarWireframe.Filter.CommentType />
        <VeltCommentsSidebarWireframe.Filter.Versions />
        <VeltCommentsSidebarWireframe.Filter.GroupBy />
        <VeltCommentsSidebarWireframe.Filter.ResetButton />
        <VeltCommentsSidebarWireframe.Filter.DoneButton />
    </VeltCommentsSidebarWireframe.Filter>
</VeltWireframe>

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Title />
</VeltWireframe>

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.CloseButton />
</VeltWireframe>

Location filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location>
        <VeltCommentsSidebarWireframe.Filter.Location.Name />
        <VeltCommentsSidebarWireframe.Filter.Location.Search />
        <VeltCommentsSidebarWireframe.Filter.Location.Item />
        <VeltCommentsSidebarWireframe.Filter.Location.ViewAll />
    </VeltCommentsSidebarWireframe.Filter.Location>
</VeltWireframe>

Name (Panel Filter Location)

Name component within the location filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Name />
</VeltWireframe>

Search (Panel Filter Location)

Search component within the location filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Search>
        <VeltCommentsSidebarWireframe.Filter.Location.Search.Tags />
        <VeltCommentsSidebarWireframe.Filter.Location.Search.HiddenCount />
        <VeltCommentsSidebarWireframe.Filter.Location.Search.Input />
        <VeltCommentsSidebarWireframe.Filter.Location.Search.DropdownIcon />
    </VeltCommentsSidebarWireframe.Filter.Location.Search>
</VeltWireframe>

Tags (Panel Filter Location Search)

Tags component within the location filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Search.Tags>
        <VeltCommentsSidebarWireframe.Filter.Location.Search.Tags.Item />
    </VeltCommentsSidebarWireframe.Filter.Location.Search.Tags>
</VeltWireframe>

Item (Panel Filter Location Search Tags)

Item component within the location filter search tags

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Search.Tags.Item>
        <VeltCommentsSidebarWireframe.Filter.Location.Search.Tags.Item.Name />
        <VeltCommentsSidebarWireframe.Filter.Location.Search.Tags.Item.Close />
    </VeltCommentsSidebarWireframe.Filter.Location.Search.Tags.Item>
</VeltWireframe>

HiddenCount (Panel Filter Location Search)

Hidden count component within the location filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Search.HiddenCount />
</VeltWireframe>

Input (Panel Filter Location Search)

Input component within the location filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Search.Input />
</VeltWireframe>

DropdownIcon (Panel Filter Location Search)

Dropdown icon component within the location filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Search.DropdownIcon />
</VeltWireframe>

Item (Panel Filter Location)

Item component within the location filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Item>
        <VeltCommentsSidebarWireframe.Filter.Location.Item.Checkbox />
        <VeltCommentsSidebarWireframe.Filter.Location.Item.Name />
        <VeltCommentsSidebarWireframe.Filter.Location.Item.Count />
    </VeltCommentsSidebarWireframe.Filter.Location.Item>
</VeltWireframe>

Checkbox (Panel Filter Location Item)

Checkbox component within the location filter item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Item.Checkbox>
        <VeltCommentsSidebarWireframe.Filter.Location.Item.Checkbox.Checked />
        <VeltCommentsSidebarWireframe.Filter.Location.Item.Checkbox.Unchecked />
    </VeltCommentsSidebarWireframe.Filter.Location.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter Location Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter Location Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter Location Item)

Name component within the location filter item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Item.Name />
</VeltWireframe>

Count (Panel Filter Location Item)

Count component within the location filter item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.Item.Count />
</VeltWireframe>

ViewAll (Panel Filter Location)

View all component within the location filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Location.ViewAll />
</VeltWireframe>

Document filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document>
        <VeltCommentsSidebarWireframe.Filter.Document.Name />
        <VeltCommentsSidebarWireframe.Filter.Document.Search />
        <VeltCommentsSidebarWireframe.Filter.Document.Item />
        <VeltCommentsSidebarWireframe.Filter.Document.ViewAll />
    </VeltCommentsSidebarWireframe.Filter.Document>
</VeltWireframe>

Name (Panel Filter Document)

Name component within the document filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Name />
</VeltWireframe>

Search (Panel Filter Document)

Search component within the document filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Search>
        <VeltCommentsSidebarWireframe.Filter.Document.Search.Tags />
        <VeltCommentsSidebarWireframe.Filter.Document.Search.HiddenCount />
        <VeltCommentsSidebarWireframe.Filter.Document.Search.Input />
        <VeltCommentsSidebarWireframe.Filter.Document.Search.DropdownIcon />
    </VeltCommentsSidebarWireframe.Filter.Document.Search>
</VeltWireframe>

Tags (Panel Filter Document Search)

Tags component within the document filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Search.Tags>
        <VeltCommentsSidebarWireframe.Filter.Document.Search.Tags.Item />
    </VeltCommentsSidebarWireframe.Filter.Document.Search.Tags>
</VeltWireframe>

Item (Panel Filter Document Search Tags)

Item component within the document filter search tags

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Search.Tags.Item>
        <VeltCommentsSidebarWireframe.Filter.Document.Search.Tags.Item.Name />
        <VeltCommentsSidebarWireframe.Filter.Document.Search.Tags.Item.Close />
    </VeltCommentsSidebarWireframe.Filter.Document.Search.Tags.Item>
</VeltWireframe>

HiddenCount (Panel Filter Document Search)

Hidden count component within the document filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Search.HiddenCount />
</VeltWireframe>

Input (Panel Filter Document Search)

Input component within the document filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Search.Input />
</VeltWireframe>

DropdownIcon (Panel Filter Document Search)

Dropdown icon component within the document filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Search.DropdownIcon />
</VeltWireframe>

Item (Panel Filter Document)

Item component within the document filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Item>
        <VeltCommentsSidebarWireframe.Filter.Document.Item.Checkbox />
        <VeltCommentsSidebarWireframe.Filter.Document.Item.Name />
        <VeltCommentsSidebarWireframe.Filter.Document.Item.Count />
    </VeltCommentsSidebarWireframe.Filter.Document.Item>
</VeltWireframe>

Checkbox (Panel Filter Document Item)

Checkbox component within the document filter item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Item.Checkbox>
        <VeltCommentsSidebarWireframe.Filter.Document.Item.Checkbox.Checked />
        <VeltCommentsSidebarWireframe.Filter.Document.Item.Checkbox.Unchecked />
    </VeltCommentsSidebarWireframe.Filter.Document.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter Document Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter Document Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter Document Item)

Name component within the document filter item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Item.Name />
</VeltWireframe>

Count (Panel Filter Document Item)

Count component within the document filter item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.Item.Count />
</VeltWireframe>

ViewAll (Panel Filter Document)

View all component within the document filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Document.ViewAll />
</VeltWireframe>

Involved filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved>
        <VeltCommentsSidebarWireframe.Filter.Involved.Name />
        <VeltCommentsSidebarWireframe.Filter.Involved.Search />
        <VeltCommentsSidebarWireframe.Filter.Involved.Item />
    </VeltCommentsSidebarWireframe.Filter.Involved>
</VeltWireframe>

Name (Panel Filter Involved)

Name component within the involved filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Name />
</VeltWireframe>

Search (Panel Filter Involved)

Search component within the involved filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Search>
        <VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags />
        <VeltCommentsSidebarWireframe.Filter.Involved.Search.HiddenCount />
        <VeltCommentsSidebarWireframe.Filter.Involved.Search.Input />
        <VeltCommentsSidebarWireframe.Filter.Involved.Search.DropdownIcon />
    </VeltCommentsSidebarWireframe.Filter.Involved.Search>
</VeltWireframe>

Tags (Panel Filter Involved Search)

Tags component within the involved filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags>
        <VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags.Item />
    </VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags>
</VeltWireframe>

Item (Panel Filter Involved Search Tags)

Item component within the involved filter search tags

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags.Item>
        <VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags.Item.Name />
        <VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags.Item.Close />
    </VeltCommentsSidebarWireframe.Filter.Involved.Search.Tags.Item>
</VeltWireframe>

HiddenCount (Panel Filter Involved Search)

Hidden count component within the involved filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Search.HiddenCount />
</VeltWireframe>

Input (Panel Filter Involved Search)

Input component within the involved filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Search.Input />
</VeltWireframe>

DropdownIcon (Panel Filter Involved Search)

Dropdown icon component within the involved filter search

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Search.DropdownIcon />
</VeltWireframe>

Item (Panel Filter Involved)

Item component within the involved filter

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Item>
        <VeltCommentsSidebarWireframe.Filter.Involved.Item.Checkbox />
        <VeltCommentsSidebarWireframe.Filter.Involved.Item.Name />
        <VeltCommentsSidebarWireframe.Filter.Involved.Item.Count />
    </VeltCommentsSidebarWireframe.Filter.Involved.Item>
</VeltWireframe>

Checkbox (Panel Filter Involved Item)

Checkbox component within the involved filter item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Item.Checkbox>
        <VeltCommentsSidebarWireframe.Filter.Involved.Item.Checkbox.Checked />
        <VeltCommentsSidebarWireframe.Filter.Involved.Item.Checkbox.Unchecked />
    </VeltCommentsSidebarWireframe.Filter.Involved.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter Involved Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter Involved Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter Involved Item)

Name component within the involved filter item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Item.Name />
</VeltWireframe>

Count (Panel Filter Involved Item)

Count component within the involved filter item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Filter.Involved.Item.Count />
</VeltWireframe>

People filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People>
    <VeltCommentsSidebarWireframe.Filter.People.Name />
    <VeltCommentsSidebarWireframe.Filter.People.Search />
    <VeltCommentsSidebarWireframe.Filter.People.Item />
  </VeltCommentsSidebarWireframe.Filter.People>
</VeltWireframe>

Name (Panel Filter People)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Name />
</VeltWireframe>

Search (Panel Filter People)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Search>
    <VeltCommentsSidebarWireframe.Filter.People.Search.Tags />
    <VeltCommentsSidebarWireframe.Filter.People.Search.HiddenCount />
    <VeltCommentsSidebarWireframe.Filter.People.Search.Input />
    <VeltCommentsSidebarWireframe.Filter.People.Search.DropdownIcon />
  </VeltCommentsSidebarWireframe.Filter.People.Search>
</VeltWireframe>

Tags (Panel Filter People Search)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Search.Tags>
    <VeltCommentsSidebarWireframe.Filter.People.Search.Tags.Item />
  </VeltCommentsSidebarWireframe.Filter.People.Search.Tags>
</VeltWireframe>

Item (Panel Filter People Search Tags)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Search.Tags.Item>
    <VeltCommentsSidebarWireframe.Filter.People.Search.Tags.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.People.Search.Tags.Item.Close />
  </VeltCommentsSidebarWireframe.Filter.People.Search.Tags.Item>
</VeltWireframe>

Name (Panel Filter People Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Search.Tags.Item.Name />
</VeltWireframe>

Close (Panel Filter People Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Search.Tags.Item.Close />
</VeltWireframe>

HiddenCount (Panel Filter People Search)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Search.HiddenCount />
</VeltWireframe>

Input (Panel Filter People Search)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Search.Input />
</VeltWireframe>

DropdownIcon (Panel Filter People Search)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Search.DropdownIcon />
</VeltWireframe>

Item (Panel Filter People)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Item>
    <VeltCommentsSidebarWireframe.Filter.People.Item.Checkbox />
    <VeltCommentsSidebarWireframe.Filter.People.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.People.Item.Count />
  </VeltCommentsSidebarWireframe.Filter.People.Item>
</VeltWireframe>

Checkbox (Panel Filter People Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Item.Checkbox>
    <VeltCommentsSidebarWireframe.Filter.People.Item.Checkbox.Checked />
    <VeltCommentsSidebarWireframe.Filter.People.Item.Checkbox.Unchecked />
  </VeltCommentsSidebarWireframe.Filter.People.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter People Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter People Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter People Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Item.Name />
</VeltWireframe>

Count (Panel Filter People Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.People.Item.Count />
</VeltWireframe>

Tagged filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged>
    <VeltCommentsSidebarWireframe.Filter.Tagged.Name />
    <VeltCommentsSidebarWireframe.Filter.Tagged.Search />
    <VeltCommentsSidebarWireframe.Filter.Tagged.Item />
  </VeltCommentsSidebarWireframe.Filter.Tagged>
</VeltWireframe>

Name (Panel Filter Tagged)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Name />
</VeltWireframe>

Search (Panel Filter Tagged)

Search component within the tagged filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Search>
    <VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags />
    <VeltCommentsSidebarWireframe.Filter.Tagged.Search.HiddenCount />
    <VeltCommentsSidebarWireframe.Filter.Tagged.Search.Input />
    <VeltCommentsSidebarWireframe.Filter.Tagged.Search.DropdownIcon />
  </VeltCommentsSidebarWireframe.Filter.Tagged.Search>
</VeltWireframe>

Tags (Panel Filter Tagged Search)

Tags component within the tagged filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags>
    <VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags.Item />
  </VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags>
</VeltWireframe>

Item (Panel Filter Tagged Search Tags)

Item component within the tagged filter search tags

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags.Item>
    <VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags.Item.Close />
  </VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags.Item>
</VeltWireframe>

Name (Panel Filter Tagged Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags.Item.Name />
</VeltWireframe>

Close (Panel Filter Tagged Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Search.Tags.Item.Close />
</VeltWireframe>

HiddenCount (Panel Filter Tagged Search)

Hidden count component within the tagged filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Search.HiddenCount />
</VeltWireframe>

Input (Panel Filter Tagged Search)

Input component within the tagged filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Search.Input />
</VeltWireframe>

DropdownIcon (Panel Filter Tagged Search)

Dropdown icon component within the tagged filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Search.DropdownIcon />
</VeltWireframe>

Item (Panel Filter Tagged)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Item>
    <VeltCommentsSidebarWireframe.Filter.Tagged.Item.Checkbox />
    <VeltCommentsSidebarWireframe.Filter.Tagged.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Tagged.Item.Count />
  </VeltCommentsSidebarWireframe.Filter.Tagged.Item>
</VeltWireframe>

Checkbox (Panel Filter Tagged Item)

Checkbox component within the tagged filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Item.Checkbox>
    <VeltCommentsSidebarWireframe.Filter.Tagged.Item.Checkbox.Checked />
    <VeltCommentsSidebarWireframe.Filter.Tagged.Item.Checkbox.Unchecked />
  </VeltCommentsSidebarWireframe.Filter.Tagged.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter Tagged Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter Tagged Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter Tagged Item)

Name component within the tagged filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Item.Name />
</VeltWireframe>

Count (Panel Filter Tagged Item)

Count component within the tagged filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Tagged.Item.Count />
</VeltWireframe>

Assigned filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned>
    <VeltCommentsSidebarWireframe.Filter.Assigned.Name />
    <VeltCommentsSidebarWireframe.Filter.Assigned.Search />
    <VeltCommentsSidebarWireframe.Filter.Assigned.Item />
  </VeltCommentsSidebarWireframe.Filter.Assigned>
</VeltWireframe>

Name (Panel Filter Assigned)

Name component within the assigned filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Name />
</VeltWireframe>

Search (Panel Filter Assigned)

Search component within the assigned filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Search>
    <VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags />
    <VeltCommentsSidebarWireframe.Filter.Assigned.Search.HiddenCount />
    <VeltCommentsSidebarWireframe.Filter.Assigned.Search.Input />
    <VeltCommentsSidebarWireframe.Filter.Assigned.Search.DropdownIcon />
  </VeltCommentsSidebarWireframe.Filter.Assigned.Search>
</VeltWireframe>

Tags (Panel Filter Assigned Search)

Tags component within the assigned filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags>
    <VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags.Item />
  </VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags>
</VeltWireframe>

Item (Panel Filter Assigned Search Tags)

Item component within the assigned filter search tags

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags.Item>
    <VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags.Item.Close />
  </VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags.Item>
</VeltWireframe>

Name (Panel Filter Assigned Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags.Item.Name />
</VeltWireframe>

Close (Panel Filter Assigned Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Search.Tags.Item.Close />
</VeltWireframe>

HiddenCount (Panel Filter Assigned Search)

Hidden count component within the assigned filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Search.HiddenCount />
</VeltWireframe>

Input (Panel Filter Assigned Search)

Input component within the assigned filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Search.Input />
</VeltWireframe>

DropdownIcon (Panel Filter Assigned Search)

Dropdown icon component within the assigned filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Search.DropdownIcon />
</VeltWireframe>

Item (Panel Filter Assigned)

Item component within the assigned filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Item>
    <VeltCommentsSidebarWireframe.Filter.Assigned.Item.Checkbox />
    <VeltCommentsSidebarWireframe.Filter.Assigned.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Assigned.Item.Count />
  </VeltCommentsSidebarWireframe.Filter.Assigned.Item>
</VeltWireframe>

Checkbox (Panel Filter Assigned Item)

Checkbox component within the assigned filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Item.Checkbox>
    <VeltCommentsSidebarWireframe.Filter.Assigned.Item.Checkbox.Checked />
    <VeltCommentsSidebarWireframe.Filter.Assigned.Item.Checkbox.Unchecked />
  </VeltCommentsSidebarWireframe.Filter.Assigned.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter Assigned Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter Assigned Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter Assigned Item)

Name component within the assigned filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Item.Name />
</VeltWireframe>

Count (Panel Filter Assigned Item)

Count component within the assigned filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Assigned.Item.Count />
</VeltWireframe>

Custom filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom id='filter-id'>
    <VeltCommentsSidebarWireframe.Filter.Custom.Name />
    <VeltCommentsSidebarWireframe.Filter.Custom.Search />
    <VeltCommentsSidebarWireframe.Filter.Custom.Item />
  </VeltCommentsSidebarWireframe.Filter.Custom>
</VeltWireframe>

Name (Panel Filter Custom)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Name />
</VeltWireframe>

Search (Panel Filter Custom)

Search component within the custom filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Search>
    <VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags />
    <VeltCommentsSidebarWireframe.Filter.Custom.Search.HiddenCount />
    <VeltCommentsSidebarWireframe.Filter.Custom.Search.Input />
    <VeltCommentsSidebarWireframe.Filter.Custom.Search.DropdownIcon />
  </VeltCommentsSidebarWireframe.Filter.Custom.Search>
</VeltWireframe>

Tags (Panel Filter Custom Search)

Tags component within the custom filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags>
    <VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags.Item />
  </VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags>
</VeltWireframe>

Item (Panel Filter Custom Search Tags)

Item component within the custom filter search tags

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags.Item>
    <VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags.Item.Close />
  </VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags.Item>
</VeltWireframe>

Name (Panel Filter Custom Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags.Item.Name />
</VeltWireframe>

Close (Panel Filter Custom Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Search.Tags.Item.Close />
</VeltWireframe>

HiddenCount (Panel Filter Custom Search)

Hidden count component within the custom filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Search.HiddenCount />
</VeltWireframe>

Input (Panel Filter Custom Search)

Input component within the custom filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Search.Input />
</VeltWireframe>

DropdownIcon (Panel Filter Custom Search)

Dropdown icon component within the custom filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Search.DropdownIcon />
</VeltWireframe>

Item (Panel Filter Custom)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Item>
    <VeltCommentsSidebarWireframe.Filter.Custom.Item.Checkbox />
    <VeltCommentsSidebarWireframe.Filter.Custom.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Custom.Item.Count />
  </VeltCommentsSidebarWireframe.Filter.Custom.Item>
</VeltWireframe>

Checkbox (Panel Filter Custom Item)

Checkbox component within the custom filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Item.Checkbox>
    <VeltCommentsSidebarWireframe.Filter.Custom.Item.Checkbox.Checked />
    <VeltCommentsSidebarWireframe.Filter.Custom.Item.Checkbox.Unchecked />
  </VeltCommentsSidebarWireframe.Filter.Custom.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter Custom Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter Custom Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter Custom Item)

Name component within the custom filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Item.Name />
</VeltWireframe>

Count (Panel Filter Custom Item)

Count component within the custom filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Custom.Item.Count />
</VeltWireframe>

Category filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category>
    <VeltCommentsSidebarWireframe.Filter.Category.Name />
    <VeltCommentsSidebarWireframe.Filter.Category.Search />
    <VeltCommentsSidebarWireframe.Filter.Category.Item />
  </VeltCommentsSidebarWireframe.Filter.Category>
</VeltWireframe>

Name (Panel Filter Category)

Name component within the category filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Name />
</VeltWireframe>

Search (Panel Filter Category)

Search component within the category filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Search>
    <VeltCommentsSidebarWireframe.Filter.Category.Search.Tags />
    <VeltCommentsSidebarWireframe.Filter.Category.Search.HiddenCount />
    <VeltCommentsSidebarWireframe.Filter.Category.Search.Input />
    <VeltCommentsSidebarWireframe.Filter.Category.Search.DropdownIcon />
  </VeltCommentsSidebarWireframe.Filter.Category.Search>
</VeltWireframe>

Tags (Panel Filter Category Search)

Tags component within the category filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Search.Tags>
    <VeltCommentsSidebarWireframe.Filter.Category.Search.Tags.Item />
  </VeltCommentsSidebarWireframe.Filter.Category.Search.Tags>
</VeltWireframe>

Item (Panel Filter Category Search Tags)

Item component within the category filter search tags

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Search.Tags.Item>
    <VeltCommentsSidebarWireframe.Filter.Category.Search.Tags.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Category.Search.Tags.Item.Close />
  </VeltCommentsSidebarWireframe.Filter.Category.Search.Tags.Item>
</VeltWireframe>

Name (Panel Filter Category Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Search.Tags.Item.Name />
</VeltWireframe>

Close (Panel Filter Category Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Search.Tags.Item.Close />
</VeltWireframe>

HiddenCount (Panel Filter Category Search)

Hidden count component within the category filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Search.HiddenCount />
</VeltWireframe>

Input (Panel Filter Category Search)

Input component within the category filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Search.Input />
</VeltWireframe>

DropdownIcon (Panel Filter Category Search)

Dropdown icon component within the category filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Search.DropdownIcon />
</VeltWireframe>

Item (Panel Filter Category)

Item component within the category filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Item>
    <VeltCommentsSidebarWireframe.Filter.Category.Item.Checkbox />
    <VeltCommentsSidebarWireframe.Filter.Category.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Category.Item.Count />
  </VeltCommentsSidebarWireframe.Filter.Category.Item>
</VeltWireframe>

Checkbox (Panel Filter Category Item)

Checkbox component within the category filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Item.Checkbox>
    <VeltCommentsSidebarWireframe.Filter.Category.Item.Checkbox.Checked />
    <VeltCommentsSidebarWireframe.Filter.Category.Item.Checkbox.Unchecked />
  </VeltCommentsSidebarWireframe.Filter.Category.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter Category Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter Category Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter Category Item)

Name component within the category filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Item.Name />
</VeltWireframe>

Count (Panel Filter Category Item)

Count component within the category filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Category.Item.Count />
</VeltWireframe>

Priority filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority>
    <VeltCommentsSidebarWireframe.Filter.Priority.Name />
    <VeltCommentsSidebarWireframe.Filter.Priority.Search />
    <VeltCommentsSidebarWireframe.Filter.Priority.Item />
  </VeltCommentsSidebarWireframe.Filter.Priority>
</VeltWireframe>

Name (Panel Filter Priority)

Name component within the priority filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Name />
</VeltWireframe>

Search (Panel Filter Priority)

Search component within the priority filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Search>
    <VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags />
    <VeltCommentsSidebarWireframe.Filter.Priority.Search.HiddenCount />
    <VeltCommentsSidebarWireframe.Filter.Priority.Search.Input />
    <VeltCommentsSidebarWireframe.Filter.Priority.Search.DropdownIcon />
  </VeltCommentsSidebarWireframe.Filter.Priority.Search>
</VeltWireframe>

Tags (Panel Filter Priority Search)

Tags component within the priority filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags>
    <VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags.Item />
  </VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags>
</VeltWireframe>

Item (Panel Filter Priority Search Tags)

Item component within the priority filter search tags

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags.Item>
    <VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags.Item.Close />
  </VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags.Item>
</VeltWireframe>

Name (Panel Filter Priority Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags.Item.Name />
</VeltWireframe>

Close (Panel Filter Priority Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Search.Tags.Item.Close />
</VeltWireframe>

HiddenCount (Panel Filter Priority Search)

Hidden count component within the priority filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Search.HiddenCount />
</VeltWireframe>

Input (Panel Filter Priority Search)

Input component within the priority filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Search.Input />
</VeltWireframe>

DropdownIcon (Panel Filter Priority Search)

Dropdown icon component within the priority filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Search.DropdownIcon />
</VeltWireframe>

Item (Panel Filter Priority)

Item component within the priority filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Item>
    <VeltCommentsSidebarWireframe.Filter.Priority.Item.Checkbox />
    <VeltCommentsSidebarWireframe.Filter.Priority.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Priority.Item.Count />
  </VeltCommentsSidebarWireframe.Filter.Priority.Item>
</VeltWireframe>

Checkbox (Panel Filter Priority Item)

Checkbox component within the priority filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Item.Checkbox>
    <VeltCommentsSidebarWireframe.Filter.Priority.Item.Checkbox.Checked />
    <VeltCommentsSidebarWireframe.Filter.Priority.Item.Checkbox.Unchecked />
  </VeltCommentsSidebarWireframe.Filter.Priority.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter Priority Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter Priority Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter Priority Item)

Name component within the priority filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Item.Name />
</VeltWireframe>

Count (Panel Filter Priority Item)

Count component within the priority filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Priority.Item.Count />
</VeltWireframe>

Status filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status>
    <VeltCommentsSidebarWireframe.Filter.Status.Name />
    <VeltCommentsSidebarWireframe.Filter.Status.Search />
    <VeltCommentsSidebarWireframe.Filter.Status.Item />
  </VeltCommentsSidebarWireframe.Filter.Status>
</VeltWireframe>

Name (Panel Filter Status)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Name />
</VeltWireframe>

Search (Panel Filter Status)

Search component within the status filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Search>
    <VeltCommentsSidebarWireframe.Filter.Status.Search.Tags />
    <VeltCommentsSidebarWireframe.Filter.Status.Search.HiddenCount />
    <VeltCommentsSidebarWireframe.Filter.Status.Search.Input />
    <VeltCommentsSidebarWireframe.Filter.Status.Search.DropdownIcon />
  </VeltCommentsSidebarWireframe.Filter.Status.Search>
</VeltWireframe>

Tags (Panel Filter Status Search)

Tags component within the status filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Search.Tags>
    <VeltCommentsSidebarWireframe.Filter.Status.Search.Tags.Item />
  </VeltCommentsSidebarWireframe.Filter.Status.Search.Tags>
</VeltWireframe>

Item (Panel Filter Status Search Tags)

Item component within the status filter search tags

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Search.Tags.Item>
    <VeltCommentsSidebarWireframe.Filter.Status.Search.Tags.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Status.Search.Tags.Item.Close />
  </VeltCommentsSidebarWireframe.Filter.Status.Search.Tags.Item>
</VeltWireframe>

Name (Panel Filter Status Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Search.Tags.Item.Name />
</VeltWireframe>

Close (Panel Filter Status Search Tags Item)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Search.Tags.Item.Close />
</VeltWireframe>

HiddenCount (Panel Filter Status Search)

Hidden count component within the status filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Search.HiddenCount />
</VeltWireframe>

Input (Panel Filter Status Search)

Input component within the status filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Search.Input />
</VeltWireframe>

DropdownIcon (Panel Filter Status Search)

Dropdown icon component within the status filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Search.DropdownIcon />
</VeltWireframe>

Item (Panel Filter Status)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Item>
    <VeltCommentsSidebarWireframe.Filter.Status.Item.Checkbox />
    <VeltCommentsSidebarWireframe.Filter.Status.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Status.Item.Count />
  </VeltCommentsSidebarWireframe.Filter.Status.Item>
</VeltWireframe>

Checkbox (Panel Filter Status Item)

Checkbox component within the status filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Item.Checkbox>
    <VeltCommentsSidebarWireframe.Filter.Status.Item.Checkbox.Checked />
    <VeltCommentsSidebarWireframe.Filter.Status.Item.Checkbox.Unchecked />
  </VeltCommentsSidebarWireframe.Filter.Status.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter Status Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter Status Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter Status Item)

Name component within the status filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Item.Name />
</VeltWireframe>

Count (Panel Filter Status Item)

Count component within the status filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Status.Item.Count />
</VeltWireframe>

CommentType (Panel Filter)

CommentType filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.CommentType>
    <VeltCommentsSidebarWireframe.Filter.CommentType.Name />
    <VeltCommentsSidebarWireframe.Filter.CommentType.Item />
  </VeltCommentsSidebarWireframe.Filter.CommentType>
</VeltWireframe>

Name (Panel Filter CommentType)

Name component within the commentType filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.CommentType.Name />
</VeltWireframe>

Item (Panel Filter CommentType)

Item component within the commentType filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.CommentType.Item>
    <VeltCommentsSidebarWireframe.Filter.CommentType.Item.Checkbox />
    <VeltCommentsSidebarWireframe.Filter.CommentType.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.CommentType.Item.Count />
  </VeltCommentsSidebarWireframe.Filter.CommentType.Item>
</VeltWireframe>

Checkbox (Panel Filter CommentType Item)

Checkbox component within the commentType filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.CommentType.Item.Checkbox>
    <VeltCommentsSidebarWireframe.Filter.CommentType.Item.Checkbox.Checked />
    <VeltCommentsSidebarWireframe.Filter.CommentType.Item.Checkbox.Unchecked />
  </VeltCommentsSidebarWireframe.Filter.CommentType.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter CommentType Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.CommentType.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter CommentType Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.CommentType.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter CommentType Item)

Name component within the commentType filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.CommentType.Item.Name />
</VeltWireframe>

Count (Panel Filter CommentType Item)

Count component within the commentType filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.CommentType.Item.Count />
</VeltWireframe>

Versions filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions>
    <VeltCommentsSidebarWireframe.Filter.Versions.Name />
    <VeltCommentsSidebarWireframe.Filter.Versions.Search />
    <VeltCommentsSidebarWireframe.Filter.Versions.Item />
  </VeltCommentsSidebarWireframe.Filter.Versions>
</VeltWireframe>

Name (Panel Filter Versions)

Name component within the versions filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Name />
</VeltWireframe>

Search (Panel Filter Versions)

Search component within the versions filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Search>
    <VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags />
    <VeltCommentsSidebarWireframe.Filter.Versions.Search.HiddenCount />
    <VeltCommentsSidebarWireframe.Filter.Versions.Search.Input />
    <VeltCommentsSidebarWireframe.Filter.Versions.Search.DropdownIcon />
  </VeltCommentsSidebarWireframe.Filter.Versions.Search>
</VeltWireframe>

Tags (Panel Filter Versions Search)

Tags component within the versions filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags>
    <VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags.Item />
  </VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags>
</VeltWireframe>

Item (Panel Filter Versions Search Tags)

Item component within the versions filter search tags

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags.Item>
    <VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags.Item.Close />
  </VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags.Item>
</VeltWireframe>

Name (Panel Filter Versions Search Tags Item)

Name component within the versions filter search tags item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags.Item.Name />
</VeltWireframe>

Close (Panel Filter Versions Search Tags Item)

Close component within the versions filter search tags item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Search.Tags.Item.Close />
</VeltWireframe>

HiddenCount (Panel Filter Versions Search)

Hidden count component within the versions filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Search.HiddenCount />
</VeltWireframe>

Input (Panel Filter Versions Search)

Input component within the versions filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Search.Input />
</VeltWireframe>

DropdownIcon (Panel Filter Versions Search)

Dropdown icon component within the versions filter search

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Search.DropdownIcon />
</VeltWireframe>

Item (Panel Filter Versions)

Item component within the versions filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Item>
    <VeltCommentsSidebarWireframe.Filter.Versions.Item.Checkbox />
    <VeltCommentsSidebarWireframe.Filter.Versions.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Versions.Item.Count />
  </VeltCommentsSidebarWireframe.Filter.Versions.Item>
</VeltWireframe>

Checkbox (Panel Filter Versions Item)

Checkbox component within the versions filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Item.Checkbox>
    <VeltCommentsSidebarWireframe.Filter.Versions.Item.Checkbox.Checked />
    <VeltCommentsSidebarWireframe.Filter.Versions.Item.Checkbox.Unchecked />
  </VeltCommentsSidebarWireframe.Filter.Versions.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter Versions Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter Versions Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter Versions Item)

Name component within the versions filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Item.Name />
</VeltWireframe>

Count (Panel Filter Versions Item)

Count component within the versions filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Versions.Item.Count />
</VeltWireframe>

GroupBy filter component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.GroupBy>
    <VeltCommentsSidebarWireframe.Filter.GroupBy.Name />
    <VeltCommentsSidebarWireframe.Filter.GroupBy.Item />
  </VeltCommentsSidebarWireframe.Filter.GroupBy>
</VeltWireframe>

Name (Panel Filter GroupBy)

Name component within the groupBy filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.GroupBy.Name />
</VeltWireframe>

Item (Panel Filter GroupBy)

Item component within the groupBy filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.GroupBy.Item>
    <VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Checkbox />
    <VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Count />
  </VeltCommentsSidebarWireframe.Filter.GroupBy.Item>
</VeltWireframe>

Checkbox (Panel Filter GroupBy Item)

Checkbox component within the groupBy filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Checkbox>
    <VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Checkbox.Checked />
    <VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Checkbox.Unchecked />
  </VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Checkbox>
</VeltWireframe>

Checked (Panel Filter GroupBy Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Filter GroupBy Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Filter GroupBy Item)

Name component within the groupBy filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Name />
</VeltWireframe>

Count (Panel Filter GroupBy Item)

Count component within the groupBy filter item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.GroupBy.Item.Count />
</VeltWireframe>

Reset button component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.ResetButton />
</VeltWireframe>

Done button component in the comments sidebar panel filter

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.DoneButton />
</VeltWireframe>

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

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Item>
    <VeltCommentsSidebarWireframe.Filter.Item.Checkbox />
    <VeltCommentsSidebarWireframe.Filter.Item.Name />
    <VeltCommentsSidebarWireframe.Filter.Item.Count />
  </VeltCommentsSidebarWireframe.Filter.Item>
</VeltWireframe>

Checkbox (Panel Item)

Checkbox component in the comments sidebar panel item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Item.Checkbox>
    <VeltCommentsSidebarWireframe.Filter.Item.Checkbox.Checked />
    <VeltCommentsSidebarWireframe.Filter.Item.Checkbox.Unchecked />
  </VeltCommentsSidebarWireframe.Filter.Item.Checkbox>
</VeltWireframe>

Checked (Panel Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Item.Checkbox.Checked />
</VeltWireframe>

Unchecked (Panel Item Checkbox)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Item.Checkbox.Unchecked />
</VeltWireframe>

Name (Panel Item)

Name component in the comments sidebar panel item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Item.Name />
</VeltWireframe>

Count (Panel Item)

Count component in the comments sidebar panel item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Filter.Item.Count />
</VeltWireframe>

List (Panel)

List component in the comments sidebar panel

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.List>
    <VeltCommentsSidebarWireframe.List.Item />
  </VeltCommentsSidebarWireframe.List>
</VeltWireframe>

Item (Panel List)

Item component in the comments sidebar panel list

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.List.Item>
    <VeltCommentsSidebarWireframe.List.Item.Group />
    <VeltCommentsSidebarWireframe.List.Item.Annotation />
  </VeltCommentsSidebarWireframe.List.Item>
</VeltWireframe>

Group (Panel List Item)

Group component in the comments sidebar panel list item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.List.Item.Group>
    <VeltCommentsSidebarWireframe.List.Item.Group.Name />
    <VeltCommentsSidebarWireframe.List.Item.Group.Count />
    <VeltCommentsSidebarWireframe.List.Item.Group.Arrow />
  </VeltCommentsSidebarWireframe.List.Item.Group>
</VeltWireframe>

Name (Panel List Item Group)

Name component in the comments sidebar panel list item group

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.List.Item.Group.Name />
</VeltWireframe>

Count (Panel List Item Group)

Count component in the comments sidebar panel list item group

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.List.Item.Group.Count />
</VeltWireframe>

Arrow (Panel List Item Group)

Arrow component in the comments sidebar panel list item group

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.List.Item.Group.Arrow />
</VeltWireframe>

Annotation (Panel List Item)

Annotation component in the comments sidebar panel list item

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.List.Item.Annotation>
    <VeltCommentDialogWireframe />
  </VeltCommentsSidebarWireframe.List.Item.Annotation>
</VeltWireframe>

EmptyPlaceholder (Panel)

Empty placeholder component in the comments sidebar panel

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.EmptyPlaceholder />
</VeltWireframe>

PageModeComposer (Panel)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.PageModeComposer>
    <VeltCommentDialogWireframe.Composer />
  </VeltCommentsSidebarWireframe.PageModeComposer>
</VeltWireframe>

FocusedThread

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.FocusedThread>
    <VeltCommentsSidebarWireframe.FocusedThread.BackButton />
    <VeltCommentsSidebarWireframe.FocusedThread.DialogContainer />
  </VeltCommentsSidebarWireframe.FocusedThread>
</VeltWireframe>

BackButton (FocusedThread)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.FocusedThread.BackButton />
</VeltWireframe>

DialogContainer (FocusedThread)

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.FocusedThread.DialogContainer>
    <VeltCommentDialogWireframe />
  </VeltCommentsSidebarWireframe.FocusedThread.DialogContainer>
</VeltWireframe>

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

React / Next.js
Other Frameworks

Example

<VeltCommentsSidebar shadowDom={false} />

API methods

const commentElement = client.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:

React / Next.js
Other Frameworks

Example

<VeltCommentsSidebar darkMode={true} />

API methods

const commentElement = client.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.

React / Next.js
Other Frameworks

React / Next.js

<VeltCommentsSidebar
  variant="sidebar1"
  dialogVariant="dialogInSidebar"
  pageModeComposerVariant="pageModeDialogInSidebar"
  focusedThreadDialogVariant="focusedThreadDialogInSidebar"
/>

Concepts

Async Collaboration

Realtime Collaboration

​Overview

​Skeleton

​Panel

​Header (Panel)

​FullscreenButton (Panel Header)

​CloseButton (Panel Header)

​Search (Panel Header)

​ResetFilterButton (Panel Header)

​Status (Panel Header)

Trigger (Panel Header Status)

Name (Panel Header Status Trigger)

Arrow (Panel Header Status Trigger)

Indicator (Panel Header Status Trigger)

Content (Panel Header Status)

Item (Panel Header Status Content)

Icon (Panel Header Status Content Item)

Name (Panel Header Status Content Item)

Count (Panel Header Status Content Item)

Checkbox (Panel Header Status Content Item)

Checked (Panel Header Status Content Item Checkbox)

Unchecked (Panel Header Status Content Item Checkbox)

​LocationFilterDropdown (Panel Header)

Trigger (Panel Header LocationFilterDropdown)

Label (Panel Header LocationFilterDropdown Trigger)

Content (Panel Header LocationFilterDropdown)

​MinimalFilterDropdown (Panel Header)

Trigger (Panel Header MinimalFilterDropdown)

Content (Panel Header MinimalFilterDropdown)

SortDate (Panel Header MinimalFilterDropdown Content)

SelectedIcon (Panel Header MinimalFilterDropdown Content SortDate)

SortUnread (Panel Header MinimalFilterDropdown Content)

SelectedIcon (Panel Header MinimalFilterDropdown Content SortUnread)

FilterAll (Panel Header MinimalFilterDropdown Content)

SelectedIcon (Panel Header MinimalFilterDropdown Content FilterAll)

FilterUnread (Panel Header MinimalFilterDropdown Content)

SelectedIcon (Panel Header MinimalFilterDropdown Content FilterUnread)

FilterRead (Panel Header MinimalFilterDropdown Content)

SelectedIcon (Panel Header MinimalFilterDropdown Content FilterRead)

FilterResolved (Panel Header MinimalFilterDropdown Content)

SelectedIcon (Panel Header MinimalFilterDropdown Content FilterResolved)

​MinimalActionsDropdown (Panel Header)

Trigger (Panel Header MinimalActionsDropdown)

Content (Panel Header MinimalActionsDropdown)

MarkAllRead (Panel Header MinimalActionsDropdown Content)

MarkAllResolved (Panel Header MinimalActionsDropdown Content)

​DocumentFilterDropdown (Panel Header)

Trigger (Panel Header DocumentFilterDropdown)

Content (Panel Header DocumentFilterDropdown)

Document (Panel Header DocumentFilterDropdown Content)

​FilterButton (Panel Header)

​Filter (Panel)

​Title (Panel Filter)

​CloseButton (Panel Filter)

​Location (Panel Filter)

Name (Panel Filter Location)

Search (Panel Filter Location)

Tags (Panel Filter Location Search)

Item (Panel Filter Location Search Tags)

HiddenCount (Panel Filter Location Search)

Input (Panel Filter Location Search)

DropdownIcon (Panel Filter Location Search)

Item (Panel Filter Location)

Checkbox (Panel Filter Location Item)

Checked (Panel Filter Location Item Checkbox)

Unchecked (Panel Filter Location Item Checkbox)

Name (Panel Filter Location Item)

Count (Panel Filter Location Item)

ViewAll (Panel Filter Location)

​Document (Panel Filter)

Name (Panel Filter Document)

Search (Panel Filter Document)

Tags (Panel Filter Document Search)

Item (Panel Filter Document Search Tags)

HiddenCount (Panel Filter Document Search)

Input (Panel Filter Document Search)

DropdownIcon (Panel Filter Document Search)

Item (Panel Filter Document)

Overview

Skeleton

Panel

Header (Panel)

FullscreenButton (Panel Header)

CloseButton (Panel Header)

Search (Panel Header)

ResetFilterButton (Panel Header)

Status (Panel Header)

LocationFilterDropdown (Panel Header)

MinimalFilterDropdown (Panel Header)

MinimalActionsDropdown (Panel Header)

DocumentFilterDropdown (Panel Header)

FilterButton (Panel Header)

Filter (Panel)

Title (Panel Filter)

CloseButton (Panel Filter)

Location (Panel Filter)

Document (Panel Filter)

Involved (Panel Filter)

People (Panel Filter)

Tagged (Panel Filter)

Assigned (Panel Filter)

Custom (Panel Filter)