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

# Notifications Tool Wireframes

> Wireframes for the Notifications Tool.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## VeltNotificationsToolWireframe

<img src="https://mintcdn.com/velt/Y46CMUqidobLXMZ7/images/customization/notification/notification-tool.png?fit=max&auto=format&n=Y46CMUqidobLXMZ7&q=85&s=9ebb3c7b32c9d4eadb9587ae877a9121" alt="" width="1280" height="720" data-path="images/customization/notification/notification-tool.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltNotificationsToolWireframe>
            <VeltNotificationsToolWireframe.Icon />
            <VeltNotificationsToolWireframe.UnreadIcon />
            <VeltNotificationsToolWireframe.UnreadCount />
            <VeltNotificationsToolWireframe.Label />
        </VeltNotificationsToolWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-notifications-tool-wireframe>
            <velt-notifications-tool-icon-wireframe></velt-notifications-tool-icon-wireframe>
            <velt-notifications-tool-unread-icon-wireframe></velt-notifications-tool-unread-icon-wireframe>
            <velt-notifications-tool-unread-count-wireframe></velt-notifications-tool-unread-count-wireframe>
            <velt-notifications-tool-label-wireframe></velt-notifications-tool-label-wireframe>
        </velt-notifications-tool-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

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

**Example**

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsTool shadowDom={false} panelShadowDom={false} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-notifications-tool shadow-dom="false" panel-shadow-dom="false"></velt-notifications-tool>
    ```
  </Tab>
</Tabs>

### Dark Mode

`Default: false`

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltNotificationsTool darkMode={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    <velt-notifications-tool dark-mode="true"></velt-notifications-tool>
    ```
  </Tab>
</Tabs>

## Variant

You can define and use [variants](/ui-customization/layout#variants) for the Notification Tool or the Notification Panel.

1. `variant`: For the Notification Tool.
2. `panelVariant`: For the Notification Panel.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsTool variant='tool1' panelVariant='panel1'/>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-tool variant='tool1' panel-variant='panel1'/>
    ```
  </Tab>
</Tabs>