> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Comment Sidebar v1 Wireframes
> Comment Sidebar Component.
> [!NOTE]
>
> We recommend that you familiarize yourself with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.
## Overview
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
## Skeleton
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Panel
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
> ```
### Header (Panel)
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=db3e6b5b744c62b9b89f9302a81dd62f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```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.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### CloseButton (Panel Header)
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=a73bc9783d9d411238c48fd48c97a03d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Search (Panel Header)
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=6d6c5da01503e33ca6b7f6ab9a1fdffa)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### ResetFilterButton (Panel Header)
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=09dfd7d18a5aef7abbef3019a3e330fa)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Status (Panel Header)
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=f02b442cf225e879cb6f6c2b8effbd9f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Trigger (Panel Header Status)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=f5742c543445467aec3bf0e91633d128)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Name (Panel Header Status Trigger)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=1f548a55df00fbb16115386d99efec65)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Arrow (Panel Header Status Trigger)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=154c23f63c0ed2705211863a64ff4727)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Indicator (Panel Header Status Trigger)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=ccced60e8a116a537f3a1d109f1b12e0)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Content (Panel Header Status)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=0cb3cd87c21714c3bc44996878402b1c)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Header Status Content)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=b4439dfd9c6b0d45379043686f4aa850)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Icon (Panel Header Status Content Item)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=73a8690b95c7610f74cf396d0443bcb0)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Header Status Content Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=e415832daefc73c344b695f12d6e571d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Header Status Content Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=17939f0f5988098ee0333f47e0796b19)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Checkbox (Panel Header Status Content Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=01c9d642c22d2f8f6d04a69b0ca5ac7b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Header Status Content Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Header Status Content Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### LocationFilterDropdown (Panel Header)
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=9a15235d630a2597553ebe481a219106)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Trigger (Panel Header LocationFilterDropdown)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=aa9f632101db09cde3f3f7d662670a98)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Label (Panel Header LocationFilterDropdown Trigger)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Content (Panel Header LocationFilterDropdown)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=57ec5cc0dc42002602aef98b3cfc2690)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### MinimalFilterDropdown (Panel Header)
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=047e540408960fa67fc02665b75b4612)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Trigger (Panel Header MinimalFilterDropdown)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=9b2b5a2b6263f8cb5070720d78125eee)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Content (Panel Header MinimalFilterDropdown)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=a0523da287ce8f5b090f2ecf50c3f0c5)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
> ```
##### **SortDate (Panel Header MinimalFilterDropdown Content)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=420457d41aff7fca504fbea884c6b688)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> Sort date
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> Sort by date
>
>
> ```
##### **SelectedIcon (Panel Header MinimalFilterDropdown Content SortDate)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> Sort date
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
> Sort by date
>
> ```
##### **SortUnread (Panel Header MinimalFilterDropdown Content)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=7fbccf0c6ea70e01eb5efe76d5fd69db)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> Sort unread
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> Sort by unread
>
>
> ```
##### **SelectedIcon (Panel Header MinimalFilterDropdown Content SortUnread)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> Sort unread
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
> Sort by unread
>
> ```
##### **FilterAll (Panel Header MinimalFilterDropdown Content)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=86c78bfbfa88f57c673bbfe5b499b9eb)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> Filter All
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> Unread or Read
>
>
> ```
##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterAll)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> Filter All
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
> Unread or Read
>
> ```
##### **FilterUnread (Panel Header MinimalFilterDropdown Content)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=8ff0f20cc41a573da6994d7999e4c095)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> Filter unread
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> Unread only
>
>
> ```
##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterUnread)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> Filter unread
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
> Unread only
>
> ```
##### **FilterRead (Panel Header MinimalFilterDropdown Content)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=0d7c7233a4087f06e7be9738316898aa)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> Filter read
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> Read only
>
>
> ```
##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterRead)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> Filter read
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
> Read only
>
> ```
##### **FilterResolved (Panel Header MinimalFilterDropdown Content)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=a9572e7e7897ac75e6c1a0b8dd9ff1c3)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> Filter resolved
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> Resolved
>
>
> ```
##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterResolved)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> Filter resolved
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
> Resolved
>
> ```
##### **FilterOpen (Panel Header MinimalFilterDropdown Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> Filter open
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> Open only
>
>
> ```
##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterOpen)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> Filter open
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
> Open only
>
> ```
##### **FilterReset (Panel Header MinimalFilterDropdown Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> Reset filters
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> Reset filters
>
>
> ```
##### **SelectedIcon (Panel Header MinimalFilterDropdown Content FilterReset)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
> Reset filters
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
> Reset filters
>
> ```
#### MinimalActionsDropdown (Panel Header)
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=4bbfe07ac59dfdf3900a1331abc4321b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Trigger (Panel Header MinimalActionsDropdown)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=8855c055b01eccc945be0cb63dd1fc96)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Content (Panel Header MinimalActionsDropdown)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=c2b70f2b21834e7aa31cab72a48b3506)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **MarkAllRead (Panel Header MinimalActionsDropdown Content)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=20e92e811e805baf8fb0752ea6bd20a3)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **MarkAllResolved (Panel Header MinimalActionsDropdown Content)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=4e56d1553cd50acd2b904012690941ab)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### DocumentFilterDropdown (Panel Header)
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=809f141987a8acc4f0716c3db01aa38d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Trigger (Panel Header DocumentFilterDropdown)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=efab2252b4a7eac8a984033d172a56f0)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Content (Panel Header DocumentFilterDropdown)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=073f204496c83cf12dbb12942e69ab5e)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Document (Panel Header DocumentFilterDropdown Content)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### FilterButton (Panel Header)
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=77ec7644dedcf9b5c18a143b7d67a58b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Filter (Panel)
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=a984d7f9e594c015210b73b596c75dae)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
#### Title (Panel Filter)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### CloseButton (Panel Filter)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Location (Panel Filter)
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=703fd989a193400e11990010efe4a47a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Location)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=e0d4a615718c0158b78ca300c35c88c2)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Search (Panel Filter Location)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=625c4d4d53412c73e2e63e2169ddfba3)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Tags (Panel Filter Location Search)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=4efe5c33fdd181122a32d1374e0a5b7f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Filter Location Search Tags)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=2fff59efc9ecbf4b6edd57357bf4bd78)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **HiddenCount (Panel Filter Location Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=a1f8e12abab5b577cb968567841226cc)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Filter Location Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=180ce4943ca63459bf01b166c6a53b9d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **DropdownIcon (Panel Filter Location Search)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=ed2aa4c7496d98a6cea182b58f2f3c5d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter Location)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=8b0ff56188f405fc829f5cd777338a06)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter Location Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=483a341fff0e6301d7dccc84bb753cf1)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter Location Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter Location Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter Location Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=7d8b783869536f03909046a8437ba43a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter Location Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=a52dcffbd70d0808523170a3049bc36e)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **ViewAll (Panel Filter Location)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=3e5659ceee5977be233ec6f40357bddd)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Document (Panel Filter)
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=1c1ddf56073d66fee7622851e630d1a9)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Document)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=afecec83f1e67ac9e1f1f3b09b27026d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Search (Panel Filter Document)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=99161d718c51e25a8c1f4a63fcbbdb1f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Tags (Panel Filter Document Search)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=f255ab0dbf8d3279a6e3461c38fdb84c)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Filter Document Search Tags)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=becac7df887852b8ebc9c21f8358504b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **HiddenCount (Panel Filter Document Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=149a75da28f71bbc8ab8b5b9bc1fb16c)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Filter Document Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=78e2e36f1038c44249b06685d4b84271)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **DropdownIcon (Panel Filter Document Search)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=a05162f509b32c0055d4af18ecd9945a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter Document)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=b693d7bd09e5af3d3f942c29d33df050)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter Document Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=ce8f561275eb103f2d5595feb1547b9d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter Document Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter Document Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter Document Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=f850bf13b928170d8c8a3586bdb55459)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter Document Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=5037ea38d42ab08cb0cf5ddb92631bd8)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **ViewAll (Panel Filter Document)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=351c14cc142df11dd1c061bf2eaa6fd9)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Involved (Panel Filter)
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=3248b5744938b6b24282912dcae08cd6)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Involved)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=7358cfc3c2fbe45e935f5b5f72511cfd)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Search (Panel Filter Involved)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=172c7a1ad4bae1062a2f77022006ab0e)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Tags (Panel Filter Involved Search)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=8a6b42983e3994799e315bd6637827d1)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Filter Involved Search Tags)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=be562e0bf04e1e648fa5cfe6b3edd956)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **HiddenCount (Panel Filter Involved Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=399d97a3fed04d42bc78956347cab509)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Filter Involved Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=a724792bf3ceba297b714e32259f56c2)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **DropdownIcon (Panel Filter Involved Search)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=4218c37fc4e3e5b87007f8613fb84fa3)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter Involved)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=6546fc66f7c80856b43943ca3064b899)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter Involved Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=cff35fe623f78c43f36a8ab0a809cd67)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter Involved Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter Involved Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter Involved Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=3eaa6893da24609f0161b2313b53053b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter Involved Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=28cbb93198aedb51498b352ab9eb6e1b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### People (Panel Filter)
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=7dbdfe518bf3ff702cff34773cdfa3b1)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Name (Panel Filter People)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=8c483eb1b5017983f5c42b67767e3eed)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Search (Panel Filter People)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=f96f4c6bc7f4a20307dadb3fb2940951)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Tags (Panel Filter People Search)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=bfdafa03dddf28571bcd93abfdf89317)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Filter People Search Tags)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=026d2395114ee746334285430e352662)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Name (Panel Filter People Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Close (Panel Filter People Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **HiddenCount (Panel Filter People Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=04dd78b76345b887500378b14b8ebf37)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Filter People Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=f5fbb825b7e0b61a3438fd5889f4356e)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **DropdownIcon (Panel Filter People Search)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=1faf1d9c73824931ff99afa1b9cf0775)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter People)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=5559dac0b1a621acfa533a5aae26c108)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter People Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=dd4ee2ab5d96832c5bed2857da69d2ba)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter People Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter People Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter People Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=090445fb30ca939f92e612b6da6efe4a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter People Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=c3f39abb61e996cc2f5588e02e18d204)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Tagged (Panel Filter)
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=088f682057cb96509e10dbfefc792074)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Tagged)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=4139a629ec4a27258da3c4df47ea02a8)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Search (Panel Filter Tagged)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=1ce09c9e9500b3c4504afc92d86d5a12)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Tags (Panel Filter Tagged Search)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=07a11bdec1934f4ebacc49910b21745a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Filter Tagged Search Tags)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=3b3c0404088a731477bac850144b5ef5)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Tagged Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Close (Panel Filter Tagged Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **HiddenCount (Panel Filter Tagged Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=6b92596c933a60ab95479245b3821a2b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Filter Tagged Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=2249ade872d00c2a669cb8d76cbb6ba4)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **DropdownIcon (Panel Filter Tagged Search)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=1e2a9b70f38197d7860913dfea85c8e1)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter Tagged)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=b82fb677fead60cbebf2310fc665355c)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter Tagged Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=bc2de848f63ae59e3bdc9ad4e2b2c74d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter Tagged Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter Tagged Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter Tagged Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=2a10643b51e68349c3536ab651c70e21)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter Tagged Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=80e84e6b44908989c3f14820fa21c85a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Assigned (Panel Filter)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=4210cb6be6b5a2475c94e6926d996dee)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Assigned)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=5697150821b15d8d015190d544b082c1)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Search (Panel Filter Assigned)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=3229f1fea696e053d2552add1fc69cfd)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Tags (Panel Filter Assigned Search)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=a9002caedde28075f20916121d4639ee)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Filter Assigned Search Tags)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=4f8173d05ac7a8ec1f49e4061e233516)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Assigned Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Close (Panel Filter Assigned Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **HiddenCount (Panel Filter Assigned Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=1893760d38d7c5405cc0b297287a7393)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Filter Assigned Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=ae74b47c862cdffc8d936cc0ff5ce694)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **DropdownIcon (Panel Filter Assigned Search)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=978f936ab03bd3940855fa53cad9dd24)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter Assigned)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=b6577d4e26c49f7a62a10db7295c3572)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter Assigned Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=990503f936ff4557e0edb7a85e03599d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter Assigned Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter Assigned Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter Assigned Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=34a038e3e947e090c98546329807dd26)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter Assigned Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=fa79f9efef1d9fbed51f2efa83cfcb47)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Custom (Panel Filter)
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=c99a72cccd5a711f893508097097241d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Custom)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=1cc8cbe9c4b7b674f61811a312eeea99)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Search (Panel Filter Custom)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=6d71b735efd58d768e00f51e455cd481)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Tags (Panel Filter Custom Search)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=76afbde23a9fbb41d4b1ce8a397c4f29)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Filter Custom Search Tags)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=22f2088b518f286a96423767fa2530e2)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Custom Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Close (Panel Filter Custom Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **HiddenCount (Panel Filter Custom Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=67aff00ff32d7fac20c0838003c8a9ca)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Filter Custom Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=b8b3eca41ac99ecb4e17974538ee7125)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **DropdownIcon (Panel Filter Custom Search)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=039b6b34c85cdb359e8a5a868539d0a0)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter Custom)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=62bc32d11f9e66a47eb2aa8e05c4ce2d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter Custom Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=2dc8edb07b5dceb56c8e7ba6938ef5f6)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter Custom Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter Custom Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter Custom Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=e04ff9dd6e682ad5f23898fedb422a60)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter Custom Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=d168005d21a3a07463ba5fb1dc60e828)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Category (Panel Filter)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=e5fae11b8ac77989dab84a9126487bab)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Category)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=0839b8b9893ee5114344c0a5508754ac)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Search (Panel Filter Category)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=855bc62b9b8782854d67f51579f953af)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Tags (Panel Filter Category Search)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=7455777cd6cda39d7a01c656081d6e07)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Filter Category Search Tags)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=c653c55ff201a195ae05cb8557d6e991)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Category Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Close (Panel Filter Category Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **HiddenCount (Panel Filter Category Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=2bae3f847988b27cae26c387477d5a3e)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Filter Category Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=3623d2d2e9a190de4c903d4b54070458)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **DropdownIcon (Panel Filter Category Search)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=3300fb09679c56390ed3c1a02a78f435)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter Category)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=812305e4b8393b2169bc85a97e39f7a9)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter Category Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=160fea5571f27672951ff1ce18aea092)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter Category Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter Category Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter Category Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=72b7f8c3429cff9870186c8169097aa8)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter Category Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=70268fba63177d7a231745cd386550c1)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Priority (Panel Filter)
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=bc64376428dc01b4ef0ba5d46c2fb374)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Priority)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=765e976ea48ebb761e63e15b8c0fd0b0)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Search (Panel Filter Priority)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=92d407a2fe89d30ccb63c0141b3d8b61)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Tags (Panel Filter Priority Search)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=f52c7eb1175409d4026f1854dc9da27f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Filter Priority Search Tags)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=99aec6a3fb090bc39cc26df9608338c5)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Priority Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Close (Panel Filter Priority Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **HiddenCount (Panel Filter Priority Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=fc6de9230029bf2862788c5892f4b8aa)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Filter Priority Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=7edb2efd059e4f2cf8668542f2dabfd1)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **DropdownIcon (Panel Filter Priority Search)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=34c9e2626f668d3da75c2a2f793d4b9e)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter Priority)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=0a1bef7f556a452c347b5de24a06ca35)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter Priority Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=ddc48450c984af53994bd28d1db66979)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter Priority Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter Priority Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter Priority Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=e6d7b52dedd612d04327b2ba5d8db7d5)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter Priority Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=dc64cd4a074a628c7daa4152eded50a3)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Status (Panel Filter)
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=12d0858c41e2cdd4c3fdcfc6c51b395b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Status)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=4ac66ad5deb5e3beedb1e7b49175f3ef)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Search (Panel Filter Status)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=c4335b5b32ebefedd4ad23cb0c0fb5b6)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Tags (Panel Filter Status Search)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=b65a408a5f0b6f3687c831f664fc8a73)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Filter Status Search Tags)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=c4283efaac9f18b74805b805163ccda4)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Status Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Close (Panel Filter Status Search Tags Item)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **HiddenCount (Panel Filter Status Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=b9e3a7f2e305b722b1a172e3f7c234ca)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Filter Status Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=e64e73c559d79e1a1891b61cc1df637a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **DropdownIcon (Panel Filter Status Search)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=ccf51d2ae1e13049ea89b3995a6134a7)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter Status)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=b8f1108ca067f848d5ddd0ed0b617e7e)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter Status Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=9717bff8bb2731e1d49e534ff4525570)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter Status Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter Status Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter Status Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=3ccefc5a9a8ebaec10821926bdb7124e)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter Status Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=755e814b601437f5bf9921f4a0d847cf)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### CommentType (Panel Filter)
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=03ee23f984d6a057ce8d1c9f28d5eef5)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Name (Panel Filter CommentType)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=8eaf85344e99033792d372aa725dcd3f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter CommentType)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=f0dc69870d1e9a3f12d4ac484e63c66c)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter CommentType Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=c534fb3be9566c35f028deef9c98b6fb)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter CommentType Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter CommentType Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter CommentType Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=dc1fbdd8726df0820d55bb84b5cc1beb)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter CommentType Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=bade607f00abceac73961f7a988402a1)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Versions (Panel Filter)
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=242ff1ac949c9f64e27be536c1323894)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Name (Panel Filter Versions)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=d037151b9eade7abd48250cbe353dd7d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Search (Panel Filter Versions)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=fd4315befa87e495872a7258fba9534f)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
> ```
##### **Tags (Panel Filter Versions Search)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=137db5175eda49bb21a2800c038edcb6)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
##### **Item (Panel Filter Versions Search Tags)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=9d02cb8198d736f8e35b07a0ed1fe2db)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
###### **Name (Panel Filter Versions Search Tags Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=5262caaf88ca10120c2a103a3864a749)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
###### **Close (Panel Filter Versions Search Tags Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=8a3a25183d34bf48132bc34f22c5d970)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **HiddenCount (Panel Filter Versions Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=9fb3f68a288ce584681f21d92affe398)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Input (Panel Filter Versions Search)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=e49e509a594be030fb3febaf92571be9)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **DropdownIcon (Panel Filter Versions Search)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=8e2284b052611773ea17b81112b71c18)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter Versions)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=6c1608a96e2522427d9f5d0c9ef2869b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter Versions Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=4f6a783c958122e10d7a7f0ad82d4149)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter Versions Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter Versions Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter Versions Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=b58389bf1e3c7b57be099eee58fc804e)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter Versions Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=e1ebcb54701aaaddf6931ba174741e3b)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### GroupBy (Panel Filter)
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=e93deb29f73d6ad88390a3d8c60caadf)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Name (Panel Filter GroupBy)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=a575a791f82cf5245e92f1b68b8c2a6c)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Item (Panel Filter GroupBy)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=b2be4ec2ca256f43c242b7e53b66cc67)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Checkbox (Panel Filter GroupBy Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=3524b212835be8ce72370676fc341093)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Filter GroupBy Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Filter GroupBy Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Name (Panel Filter GroupBy Item)**
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=97ed345c0b7dad6f573a2eb2395999c8)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel Filter GroupBy Item)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=ac770364b5fcb530b27cf203bd3dabb8)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### ResetButton (Panel Filter)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### DoneButton (Panel Filter)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
> [!NOTE]
>
> 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)
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=dfc1b52fed4de6ef2b0c65aef0688559)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
#### Checkbox (Panel Item)
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=7d735aad67db6d42fabf75f5ab67078c)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Checked (Panel Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Unchecked (Panel Item Checkbox)**
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Name (Panel Item)
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=a4d37f6b7c24d3b32b59ba2b5af77f18)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
#### Count (Panel Item)
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=ffdb69dbc043aab9b953d7386e3b60b7)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### List (Panel)
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=a7257009fb00bf58d28f9ad32fd535a7)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
#### Item (Panel List)
.png?fit=max\&auto=format\&n=ckAd7FZhkD4GmI2n\&q=85\&s=2b26e092d30d0c9e0f9444e57f168af4)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
##### **Group (Panel List Item)**
.png?fit=max\&auto=format\&n=FgT_QMqpkqqqRgNl\&q=85\&s=46528fe12bd922bdf3af9e15ea2da05a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
> ```
##### **Name (Panel List Item Group)**
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=aef381c91e37854cb1a8a4cf8635df41)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Count (Panel List Item Group)**
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=ae95cb7d6059e2fc5b0eb2557f17fb7d)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Arrow (Panel List Item Group)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=dac98869839cb734d790fcee23f42a0a)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
##### **Annotation (Panel List Item)**
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=8910667b0fda0ea7401c6ba81df8a738)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
### EmptyPlaceholder (Panel)
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=ace64d03c00c39c40dd69585e2351fda)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### PageModeComposer (Panel)
.png?fit=max\&auto=format\&n=hZjtW5JqIiNSoXDj\&q=85\&s=9866be6830012e06365557e8567bc4e0)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
> ```
## FocusedThread
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
> ```
### BackButton (FocusedThread)
.png?fit=max\&auto=format\&n=Qt-6RgpPL1jVldHd\&q=85\&s=8286c2d57f8121866af4451993b888d9)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### DialogContainer (FocusedThread)
.png?fit=max\&auto=format\&n=YaYDyijABZndOwPS\&q=85\&s=75097158c63dd2a5a9f317b14318d397)
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
> ```
> [tab] Other Frameworks
>
> ```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`
> [tab] React / Next.js
>
> ##### **Example**
>
> ```jsx theme={null}
>
> ```
>
> ##### **API methods**
>
> ```jsx theme={null}
> const commentElement = client.getCommentElement();
> commentElement.enableSidebarShadowDOM();
> commentElement.disableSidebarShadowDOM();
> ```
> [tab] Other Frameworks
>
> ##### **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:
> [tab] React / Next.js
>
> ##### **Example**
>
> ```js theme={null}
>
> ```
>
> ##### **API methods**
>
> ```jsx theme={null}
> const commentElement = client.getCommentElement();
> commentElement.enableDarkMode();
> commentElement.disableDarkMode();
> ```
> [tab] Other Frameworks
>
> ##### **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.
> [tab] React / Next.js
>
> ```jsx React / Next.js theme={null}
> variant="sidebar1"
> dialogVariant="dialogInSidebar"
> pageModeComposerVariant="pageModeDialogInSidebar"
> focusedThreadDialogVariant="focusedThreadDialogInSidebar"
> />
> ```
> [tab] Other Frameworks
>
> ```jsx Other Frameworks theme={null}
> variant="sidebar1"
> dialog-variant="dialogInSidebar"
> page-mode-composer-variant="pageModeDialogInSidebar"
> focused-thread-dialog-variant="focusedThreadDialogInSidebar"
> >
> ```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.