> ## Documentation Index
> Fetch the complete documentation index at: https://velt-raghul-agent-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Inline Reactions Section
> This component is used to render the reaction tool and all the reactions.
We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
## VeltInlineReactionsSectionWireframe
```jsx theme={null}
```
```html theme={null}
```
### Panel
```jsx theme={null}
```
```html theme={null}
```
#### ToolContainer
```jsx theme={null}
```
```html theme={null}
```
##### VeltReactionToolWireframe
```jsx theme={null}
```
```html theme={null}
```
#### List
```jsx theme={null}
```
```html theme={null}
```
##### VeltReactionPinWireframe
```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`
**Using Props:**
```js theme={null}
```
**Using API:**
```js theme={null}
const reactionElement = client.getReactionElement();
reactionElement.enableDarkMode();
reactionElement.disableDarkMode();
```
**Using Props:**
```html theme={null}
```
**Using API:**
```js theme={null}
const reactionElement = Velt.getReactionElement();
reactionElement.enableDarkMode();
reactionElement.disableDarkMode();
```
## Variants
### Pre-defined Variants
The Inline Reactions has 1 pre-defined variant:
* `inline`: This will customize the default components inside the Inline Reactions Component.
You can define your own variants and use them in different places of your app.
```jsx theme={null}
```
```html theme={null}
```