> ## 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.
# Single Editor Mode
> Wireframes for the Single Editor Mode Panel.
> [!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.
## VeltSingleEditorModePanelWireframe
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
>
>
>
> {/* Editor sees this button when they try to edit in a different tab */}
>
>
> {/* Editor sees these buttons when Viewer requests access */}
>
>
>
> {/* Viewer sees this button by default */}
>
>
> {/* Viewer sees this button when they have already requested access */}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ```
### ViewerText
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### EditorText
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### Countdown
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### EditHere
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### AcceptRequest
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### RejectRequest
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### RequestAccess
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
### CancelRequest
> [tab] React / Next.js
>
> ```jsx theme={null}
>
>
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
>
>
> ```
## Styling
### Disable ShadowDOM
* By default, Shadow DOM 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
>
> ```jsx theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
### Dark Mode
By default, all components are in Light Mode. Use this prop to enable Dark Mode.
Default: `false`
> [tab] React / Next.js
>
> ```js theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
### Variants
You can apply variants like you do for other components. You need to define variants using Wireframes. Read more [here](https://velt.dev/docs/ui-customization/wireframes/layout-customization.md#create-custom-variants).
> [tab] React / Next.js
>
> ```js theme={null}
>
> ```
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.