> ## 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.

# Inline Reactions Section

> This component is used to render the reaction tool and all the reactions.

> [!NOTE]
>
> We recommend that you familiarize yourselves with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.

## VeltInlineReactionsSectionWireframe

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/inline-reactions/inline-reactions-overview.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=ae556ca4004e1be97e9c9d63073e5a24)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltInlineReactionsSectionWireframe>
>         <VeltInlineReactionsSectionWireframe.Panel />
>     </VeltInlineReactionsSectionWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-inline-reactions-section-wireframe>
>         <velt-inline-reactions-section-panel-wireframe></velt-inline-reactions-section-panel-wireframe>
>     </velt-inline-reactions-section-wireframe>
> </velt-wireframe>
> ```

### Panel

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/inline-reactions/inline-reactions-overview-breakdown.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=fa1d2a0cfdc9762c0e9af2b45bce2b53)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltInlineReactionsSectionWireframe.Panel>
>         <VeltInlineReactionsSectionWireframe.ToolContainer />
>         <VeltInlineReactionsSectionWireframe.List />
>     </VeltInlineReactionsSectionWireframe.Panel>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-inline-reactions-section-panel-wireframe>
>         <velt-inline-reactions-section-tool-container-wireframe></velt-inline-reactions-section-tool-container-wireframe>
>         <velt-inline-reactions-section-list-wireframe></velt-inline-reactions-section-list-wireframe>
>     </velt-inline-reactions-section-panel-wireframe>
> </velt-wireframe>
> ```

#### ToolContainer

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/inline-reactions/inline-reactions-tool-container.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=ceb01b9d5eca2b54017a81b7532a7dac)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltInlineReactionsSectionWireframe.ToolContainer>
>         <VeltReactionToolWireframe />
>     </VeltInlineReactionsSectionWireframe.ToolContainer>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-inline-reactions-section-tool-container-wireframe>
>         <velt-reaction-tool-wireframe></velt-reaction-tool-wireframe>
>     </velt-inline-reactions-section-tool-container-wireframe>
> </velt-wireframe>
> ```

##### VeltReactionToolWireframe

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltReactionToolWireframe />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-reaction-tool-wireframe></velt-reaction-tool-wireframe>
> </velt-wireframe>
> ```

#### List

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/inline-reactions/inline-reactions-list.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=471d5007261a03a2dbe94ba8da109cd9)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltInlineReactionsSectionWireframe.List>
>         <VeltReactionPinWireframe />
>     </VeltInlineReactionsSectionWireframe.List>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-inline-reactions-section-list-wireframe>
>         <velt-reaction-pin-wireframe></velt-reaction-pin-wireframe>
>     </velt-inline-reactions-section-list-wireframe>
> </velt-wireframe>
> ```

##### VeltReactionPinWireframe

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltReactionPinWireframe />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-reaction-pin-wireframe></velt-reaction-pin-wireframe>
> </velt-wireframe>
> ```

## 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
>
> ```jsx theme={null}
> <VeltInlineReactionsSection shadowDom={false} />
> ```

> [tab] Other Frameworks
>
> ```jsx theme={null}
> <velt-inline-reactions-section shadow-dom="false"></velt-inline-reactions-section>
> ```

### Dark Mode

Default: `false`

> [tab] React / Next.js
>
> **Using Props:**
>
> ```js theme={null}
> <VeltInlineReactionsSection darkMode={true} />
> ```
>
> **Using API:**
>
> ```js theme={null}
> const reactionElement = client.getReactionElement();
> reactionElement.enableDarkMode();
> reactionElement.disableDarkMode();
> ```

> [tab] Other Frameworks
>
> **Using Props:**
>
> ```html theme={null}
> <velt-inline-reactions-section dark-mode="true"></velt-inline-reactions-section>
> ```
>
> **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.

> [tab] React / Next.js
>
> ```jsx theme={null}
>  <VeltWireframe>
>     <VeltInlineReactionsSection variant="inline"></VeltInlineReactionsSection>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-inline-reactions-section variant="inline"></velt-inline-reactions-section>
> </velt-wireframe>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.