> ## Documentation Index
> Fetch the complete documentation index at: https://velt-codex-ui-customization-guide-refresh.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Notifications Panel Wireframes
> Wireframes for the Notifications Panel.
We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
## Overview
```jsx theme={null}
```
```html theme={null}
```
## Title
```jsx theme={null}
```
```html theme={null}
```
## ReadAllButton
```jsx theme={null}
```
```html theme={null}
```
## Skeleton
```jsx theme={null}
```
```html theme={null}
```
## Header
```jsx theme={null}
```
```html theme={null}
```
#### TabAll
```jsx theme={null}
```
```html theme={null}
```
#### TabDocuments
```jsx theme={null}
```
```html theme={null}
```
#### TabForYou
```jsx theme={null}
```
```html theme={null}
```
#### TabPeople
```jsx theme={null}
```
```html theme={null}
```
## Content
```jsx theme={null}
```
```html theme={null}
```
### ForYou
```jsx theme={null}
```
```html theme={null}
```
### All
```jsx theme={null}
```
```html theme={null}
```
#### All List
```jsx theme={null}
```
```html theme={null}
```
#### All List Item
```jsx theme={null}
```
```html theme={null}
```
#### All List Item Label
```jsx theme={null}
```
```html theme={null}
```
#### All List Item Content
```jsx theme={null}
```
```html theme={null}
```
### Documents
```jsx theme={null}
```
```html theme={null}
```
#### Documents List
```jsx theme={null}
```
```html theme={null}
```
#### Documents List Item
```jsx theme={null}
```
```html theme={null}
```
#### Documents List Item Unread
```jsx theme={null}
```
```html theme={null}
```
#### Documents List Item Name
```jsx theme={null}
```
```html theme={null}
```
#### Documents List Item Count
```jsx theme={null}
```
```html theme={null}
```
#### Documents List Item Content
```jsx theme={null}
```
```html theme={null}
```
### People
```jsx theme={null}
```
```html theme={null}
```
#### People List
```jsx theme={null}
```
```html theme={null}
```
#### People List Item
```jsx theme={null}
```
```html theme={null}
```
#### People List Item Avatar
```jsx theme={null}
```
```html theme={null}
```
#### People List Item Name
```jsx theme={null}
```
```html theme={null}
```
#### People List Item Count
```jsx theme={null}
```
```html theme={null}
```
#### People List Item Content
```jsx theme={null}
```
```html theme={null}
```
## Settings
```jsx theme={null}
```
```html theme={null}
```
### Settings Header
```jsx theme={null}
```
```html theme={null}
```
#### Header BackButton
```jsx theme={null}
```
```html theme={null}
```
#### Header Title
```jsx theme={null}
```
```html theme={null}
```
### Settings Title
```jsx theme={null}
```
```html theme={null}
```
### Settings Description
```jsx theme={null}
```
```html theme={null}
```
### Settings List
```jsx theme={null}
```
```html theme={null}
```
#### Settings List Accordion
```jsx theme={null}
```
```html theme={null}
```
#### Accordion Trigger
```jsx theme={null}
```
```html theme={null}
```
#### Accordion Trigger Label
```jsx theme={null}
```
```html theme={null}
```
#### Accordion Trigger SelectedValue
```jsx theme={null}
```
```html theme={null}
```
#### Accordion Trigger Icon
```jsx theme={null}
```
```html theme={null}
```
#### Accordion Content
```jsx theme={null}
```
```html theme={null}
```
#### Accordion Content Item
```jsx theme={null}
```
```html theme={null}
```
#### Accordion Content Item Icon
```jsx theme={null}
```
```html theme={null}
```
#### Accordion Content Item Label
```jsx theme={null}
```
```html theme={null}
```
### Settings Footer
```jsx theme={null}
```
```html theme={null}
```
#### MuteAllTitle
```jsx theme={null}
```
```html theme={null}
```
#### MuteAllDescription
```jsx theme={null}
```
```html theme={null}
```
#### MuteAllToggle
```jsx theme={null}
```
```html theme={null}
```
## Shared Components
### Content List
```jsx theme={null}
```
```html theme={null}
```
### Content List Item
```jsx theme={null}
```
```html theme={null}
```
#### Content List Item Avatar
```jsx theme={null}
```
```html theme={null}
```
#### Content List Item Unread
```jsx theme={null}
```
```html theme={null}
```
#### Content List Item Headline
```jsx theme={null}
```
```html theme={null}
```
#### Content List Item Body
```jsx theme={null}
```
```html theme={null}
```
#### Content List Item FileName
```jsx theme={null}
```
```html theme={null}
```
#### Content List Item Time
```jsx theme={null}
```
```html theme={null}
```
### LoadMore
```jsx theme={null}
```
```html theme={null}
```
### AllReadContainer
```jsx theme={null}
```
```html theme={null}
```
## Styling
### Disable ShadowDOM
* By default, ShadowDOM is used to ensure that your app's CSS does not interfere with the styling of the SDK components.
* Disable the shadow dom to apply your custom CSS to the component.
`Default: true`
```jsx theme={null}
```
```jsx theme={null}
```
### Dark Mode
`Default: false`
```js theme={null}
```
```html theme={null}
```