diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..afaaec08
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+ "cSpell.words": [
+ "topbar"
+ ]
+}
\ No newline at end of file
diff --git a/images/inbox/Elements.png b/images/inbox/Elements.png
new file mode 100644
index 00000000..dff68ab9
Binary files /dev/null and b/images/inbox/Elements.png differ
diff --git a/images/inbox/Variables Inbox.png b/images/inbox/Variables Inbox.png
new file mode 100644
index 00000000..7fa6a2b6
Binary files /dev/null and b/images/inbox/Variables Inbox.png differ
diff --git a/inbox/introduction.mdx b/inbox/introduction.mdx
index 0765b1eb..2d1f892f 100644
--- a/inbox/introduction.mdx
+++ b/inbox/introduction.mdx
@@ -1,12 +1,10 @@
---
-title: 'Introduction'
-description: "Learn more about Novu's Inbox Component."
+title: 'Overview'
+description: "Learn more about Novu's Inbox component."
---
The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort.
-In-App notifications are different from push notifications because the notifications are consumed directly by the user in your app itself, whereas push notifications are shown on the device level. Read more about [push channel and supported providers.](/channels-and-providers/push/overview)
-
Novu provides a pre-built, ready-to-use, and customizable Inbox UI component. It's in React today, and soon will be available in other popular frameworks including Vue, React Native, and full headless.
diff --git a/inbox/react/advanced-configuration.mdx b/inbox/react/advanced-configuration.mdx
index 96981a61..43806a9a 100644
--- a/inbox/react/advanced-configuration.mdx
+++ b/inbox/react/advanced-configuration.mdx
@@ -4,24 +4,6 @@ sidebarTitle: 'Advanced Configuration'
description: 'Learn how to configure the Inbox component with advanced options'
---
-## Use your own backend and socket URL
-
-By default, Novu's hosted services for API and socket are used. If you want, you can override them and configure your own.
-
-```tsx
-import { Inbox } from '@novu/react';
-
-function Novu() {
- return (
-
- );
-}
-```
## HMAC Encryption
@@ -67,3 +49,22 @@ const hmacHash = createHmac('sha256', process.env.NOVU_API_KEY)
## Backend SDK Methods
[Backend sdk methods](/sdks/framework/typescript/overview)
+
+## Use your own backend and socket URL
+
+By default, Novu's hosted services for API and socket are used. If you want, you can override them and configure your own.
+
+```tsx
+import { Inbox } from '@novu/react';
+
+function Novu() {
+ return (
+
+ );
+}
+```
\ No newline at end of file
diff --git a/inbox/react/components.mdx b/inbox/react/components.mdx
deleted file mode 100644
index e064d57f..00000000
--- a/inbox/react/components.mdx
+++ /dev/null
@@ -1,303 +0,0 @@
----
-title: 'Inbox Components'
-sidebarTitle: 'Components'
-description: 'Learn how to use the different components of the Inbox'
----
-
-## Components
-
-The Inbox is composed of the following components:
-
-- [Inbox](#inbox)
-- [Bell](#bell)
-- [Notifications](#notifications)
-- [Preferences](#preferences)
-
-### Inbox
-
-It renders an opinionated `` with a bell button, that triggers a popover on lock. The popover contains the notifications list and the user preferences.
-
-#### Default Inbox
-
-```tsx
-import { Inbox } from '@novu/react';
-
-function Novu() {
- return (
-
- );
-}
-```
-
-#### Controlled Popover state
-
-```tsx
-import { Inbox } from '@novu/react';
-
-function Novu() {
- const [open, setOpen] = React.useState(false);
-
- return (
- <>
-
-
-
- );
-}
-```
-
-#### Custom Notification item
-
-Customize the notification item by passing a render function to the `renderNotification` prop.
-You can access the notification object and render the notification item as per your requirements.
-The `notification.data` property allows you acessing the custom information while rendering notification item.
-You can check how to pass it with the Novu Framework in-app step output [here](/sdks/framework/typescript/steps/inbox#inbox-step-output).
-
-```tsx
-import { Inbox } from '@novu/react';
-
-function Novu() {
- return (
- (
-
- )}
- />
- );
-}
-```
-
-#### Handle notification click
-
-```tsx
-import { Inbox } from '@novu/react';
-
-function Novu() {
- return (
- {
- // your logic to handle notification click
- }}
- />
- );
-}
-```
-
-#### Redirect on the notification click
-
-The `redirect` [object](/sdks/framework/typescript/steps/inbox#inbox-step-output) allows to define the URL to visit when clicking on the notification item.
-The value will be implicitly passed to the notification and used when click event happens.
-
-#### Handle notification button clicks
-
-```tsx
-import { Inbox } from '@novu/react';
-
-function Novu() {
- return (
- {
- // your logic to handle primary action click
- }}
- onSecondaryActionClick={(notification) => {
- // your logic to handle secondary action click
- }}
- />
- );
-}
-```
-
-#### Redirect on the notification action button click
-
-The `redirect` [object](/sdks/framework/typescript/steps/inbox#inbox-step-output) on the `primaryAction` or `secondaryAction` prop allows to define the URL to visit when clicking on the notification action button.
-The value will be implicitly passed to the action buttons and used when click event happens.
-
-### Bell
-
-The `Bell` component is used to display the notification bell icon. It can be used to show the number of unread notifications.
-
-```tsx
-import { Inbox, Bell } from '@novu/react';
-
-function Novu() {
- return (
-
-
-
- );
-}
-```
-
-#### Custom Bell
-
-You can pass custom components as children to the `Bell` component to render the custom bell icon.
-
-```tsx
-import { Inbox, Bell } from '@novu/react';
-import { BellIcon } from './icons';
-
-function Novu() {
- return (
-
- (
-
- {unreadCount}
-
-
- )}
- />
-
- );
-}
-```
-
-### Notifications
-
-The `Notifications` component is used to display the list of notifications.
-
-#### Notifications as a list without the Bell and Popover
-
-```tsx
-import { Inbox, Notifications } from '@novu/react';
-
-function Novu() {
- return (
-
-
-
- );
-}
-```
-
-### Notifications as a list with custom Notification item
-
-```tsx
-import { Inbox, Notifications } from '@novu/react';
-
-function Novu() {
- return (
-
- (
-
-
{notification.subject}
-
{notification.body}
-
{notification.data.text}
-
- )}
- />
-
- );
-}
-```
-
-### Preferences
-
-The `Preferences` component is used to display the preferences. It can be used to show the preferences.
-Use the `Preferences` component to show the preferences without the bell and popover.
-
-```tsx
-import { Inbox, Preferences } from '@novu/react';
-
-function Novu() {
- return (
-
-
-
- );
-}
-```
-
-### Bring your own Popover
-
-component allows you to bring your own popover component along with custom components.
-Below is an example of how you can bring your own popover component with Radix UI.
-
-```tsx
-import React from 'react';
-import * as Popover from '@radix-ui/react-popover';
-import { BellIcon, Cross2Icon } from '@radix-ui/react-icons';
-import { Inbox, Bell, Notifications } from '@novu/react';
-import './styles.css';
-
-const PopoverDemo = () => (
-
-
-
- (
-
- {unreadCount}
-
-
- )}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-);
-
-export default PopoverDemo;
-```
diff --git a/inbox/react/components/bell.mdx b/inbox/react/components/bell.mdx
new file mode 100644
index 00000000..d3427ed7
--- /dev/null
+++ b/inbox/react/components/bell.mdx
@@ -0,0 +1,90 @@
+---
+title: ''
+---
+
+
+The `Bell` component displays the notification bell icon. It can also be used to show the number of unread notifications.
+
+```tsx
+import { Inbox, Bell } from '@novu/react';
+
+function Novu() {
+ return (
+
+
+
+ );
+}
+```
+
+### Custom Bell
+
+You can pass any custom components as children to and render them as custom bell icon.
+
+```tsx
+import { Inbox, Bell } from '@novu/react';
+import { BellIcon } from './icons';
+
+function Novu() {
+ return (
+
+ (
+
+ {unreadCount}
+
+
+ )}
+ />
+
+ );
+}
+```
+
+
+### Bring your own Popover
+
+ can be mounted in your own popover component. For further customization, you can also use the `renderBell` and `renderNotification` render props.
+Below is an example of how to use `` with [Radix UI](https://www.radix-ui.com/).
+
+```tsx
+import React from 'react';
+import * as Popover from '@radix-ui/react-popover';
+import { BellIcon, Cross2Icon } from '@radix-ui/react-icons';
+import { Inbox, Bell, Notifications } from '@novu/react';
+import './styles.css';
+
+const PopoverDemo = () => (
+
+
+
+ (
+
+ {unreadCount}
+
+
+ )}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default PopoverDemo;
+```
diff --git a/inbox/react/components/inbox.mdx b/inbox/react/components/inbox.mdx
new file mode 100644
index 00000000..2ee66700
--- /dev/null
+++ b/inbox/react/components/inbox.mdx
@@ -0,0 +1,138 @@
+---
+title: ''
+---
+
+
+Renders `` with a bell button, that opens a popover on click. The popover contains the notifications list and the user preferences.
+
+### Default Inbox
+
+```tsx
+import { Inbox } from '@novu/react';
+
+function Novu() {
+ return (
+
+ );
+}
+```
+
+### Controlled Popover state
+
+```tsx
+import { Inbox } from '@novu/react';
+
+function Novu() {
+ const [open, setOpen] = React.useState(false);
+
+ return (
+ <>
+
+
+
+ );
+}
+```
+
+### Custom Notification item
+
+Customize the notification item by passing a render function to the `renderNotification` prop.
+You can access the notification object and render the notification item as per your requirements.
+The `notification.data` property allows you acessing the custom information while rendering notification item.
+You can check how to pass it with the Novu Framework in-app step output [here](/sdks/framework/typescript/steps/inbox#inbox-step-output).
+
+```tsx
+import { Inbox } from '@novu/react';
+
+function Novu() {
+ return (
+ (
+
+ )}
+ />
+ );
+}
+```
+
+### Handle notification click
+
+```tsx
+import { Inbox } from '@novu/react';
+
+function Novu() {
+ return (
+ {
+ // your logic to handle notification click
+ }}
+ />
+ );
+}
+```
+
+### Redirect on the notification click
+
+The `redirect` [object](/sdks/framework/typescript/steps/inbox#inbox-step-output) allows to define the URL to visit when clicking on the notification item.
+The value will be implicitly passed to the notification and used when click event happens.
+
+### Handle notification button clicks
+
+```tsx
+import { Inbox } from '@novu/react';
+
+function Novu() {
+ return (
+ {
+ // your logic to handle primary action click
+ }}
+ onSecondaryActionClick={(notification) => {
+ // your logic to handle secondary action click
+ }}
+ />
+ );
+}
+```
+
+### Redirect on the notification action button click
+
+The `redirect` [object](/sdks/framework/typescript/steps/inbox#inbox-step-output) on the `primaryAction` or `secondaryAction` prop allows to define the URL to visit when clicking on the notification action button.
+The value will be implicitly passed to the action buttons and used when click event happens.
diff --git a/inbox/react/components/notifications.mdx b/inbox/react/components/notifications.mdx
new file mode 100644
index 00000000..b2642e50
--- /dev/null
+++ b/inbox/react/components/notifications.mdx
@@ -0,0 +1,47 @@
+---
+title: ''
+---
+
+The `Notifications` component is used to display the list of notifications.
+
+### Notifications as a list without the Bell and Popover
+
+```tsx
+import { Inbox, Notifications } from '@novu/react';
+
+function Novu() {
+ return (
+
+
+
+ );
+}
+```
+
+### Notifications as a list with custom Notification item
+
+```tsx
+import { Inbox, Notifications } from '@novu/react';
+
+function Novu() {
+ return (
+
+ (
+
+
{notification.subject}
+
{notification.body}
+
{notification.data.text}
+
+ )}
+ />
+
+ );
+}
+```
diff --git a/inbox/react/components/overview.mdx b/inbox/react/components/overview.mdx
new file mode 100644
index 00000000..88658721
--- /dev/null
+++ b/inbox/react/components/overview.mdx
@@ -0,0 +1,97 @@
+---
+title: 'Overview'
+---
+
+## Composition
+
+The Inbox is composed of the following sub-components that you can use to build your Inbox structure and layout:
+
+- [\](/inbox/react/components/inbox) - The Inbox wrapper, which is used to wrap the entire inbox UI and establish the session.
+- [\](/inbox/react/components/bell) - Used to display the bell icon and trigger the popover component when clicked.
+- [\](/inbox/react/components/notifications) - Displays the notifications list.
+- [\](/inbox/react/components/preferences) - Used to display the preferences modal.
+
+The internal UI and styles for those components can be modified using the [`appearance`](/inbox/react/components/styling#appearance) prop.
+
+## Layouts
+
+The composition of the indivudal components can generate multiple different popular inbox layouts.
+
+### Inbox with Bell (Default)
+
+A trigger button usually located at the top right corner of the screen, which triggers the popover component when clicked.
+
+
+
+
+```tsx Defualt Bell
+import { Inbox } from '@novu/react';
+
+function Novu() {
+ return (
+
+ );
+}
+```
+
+```tsx Custom Bell
+import { Inbox, Bell } from '@novu/react';
+import { BellIcon } from './icons';
+
+function Novu() {
+ return (
+
+ (
+
+ {unreadCount}
+
+
+ )}
+ />
+
+ );
+}
+```
+
+
+### Side menu Inbox
+
+To render a side menu inbox, use the `` component as a direct child of the `` component, you can hide or show it based on any custom logic.
+
+```tsx
+import { Inbox, Notifications } from '@novu/react';
+
+function Novu() {
+ return (
+
+ {showSideMenu && (
+
+ )}
+
+ );
+}
+```
+
+### Full page Inbox
+
+Similiary to the side menu inbox, you can use the `` component as a direct child of the `` component, you can hide or show it based on any custom logic.
+
+```tsx
+import { Inbox, Notifications } from '@novu/react';
+
+function Novu() {
+ return (
+
+
+
+ );
+}
+```
+
diff --git a/inbox/react/components/preferences.mdx b/inbox/react/components/preferences.mdx
new file mode 100644
index 00000000..82c3392e
--- /dev/null
+++ b/inbox/react/components/preferences.mdx
@@ -0,0 +1,33 @@
+---
+title: ''
+---
+
+By default, Novu will show the subscriber preferences cog icon on the Inbox component.
+
+Users can enable/disable any active channel in the workflow using subscriber preferences or they can update the preference globally for all workflows under the `Global Preferences`.
+
+
+
+
+### Preferences Component
+
+The `Preferences` component is used to display the preferences. It can be used to show the preferences.
+Use the `Preferences` component to show the preferences without the bell and popover.
+
+```tsx
+import { Inbox, Preferences } from '@novu/react';
+
+function Novu() {
+ return (
+
+
+
+ );
+}
+```
\ No newline at end of file
diff --git a/inbox/react/customization.mdx b/inbox/react/customization.mdx
deleted file mode 100644
index 0d7f43ec..00000000
--- a/inbox/react/customization.mdx
+++ /dev/null
@@ -1,190 +0,0 @@
----
-title: "Customizing Inbox"
-sidebarTitle: "Customization"
-description: "Learn how to customize the pre built Inbox component using the appearance props"
----
-
-## Appearance Prop
-
-The `appearance` prop can be used to customise the Inbox. It has three main keys: `baseTheme`, `variables` and `elements`.
-
-- `variables`: The variables object allows you to set global styling variables that apply to multiple elements within the inbox. This can include colors, border radius, and other common styles. You can find the list of [supported variables](https://github.com/novuhq/novu/blob/01268c688d1c173736b4ad51147370844952335a/packages/js/src/ui/types.ts#L24).
-- `elements`: Elements are the individual UI components that make up the Inbox. The elements object allows you to define styles for these components. Each key corresponds to an component, and the value is an object containing `style properties` or you can also pass your `css classes`.
- See list of available elements [here](https://github.com/novuhq/novu/blob/01268c688d1c173736b4ad51147370844952335a/packages/js/src/ui/config/appearanceKeys.ts#L6).
-- `baseTheme`: The baseTheme object allows you to define the base theme for the inbox. This can include variables and elements that apply to the entire inbox, as well as additional themes that can be switched between. It accepts an array of objects, each containing variables and elements. Each object will override the previous object's styles.
- This enables to override the custom themes imported from the `@novu/react` package.
- Currently, we only export the `dark` [theme](https://github.com/novuhq/novu/blob/01268c688d1c173736b4ad51147370844952335a/packages/js/src/ui/config/defaultVariables.ts#L3).
-
-```tsx
-import { Inbox } from "@novu/react";
-const appearance = {
- variables: {
- borderRadius: "0.5rem",
- },
- elements: {
- bellContainer: {
- colorBackground: "white",
- colorForeground: "black",
- borderRadius: "0.5rem",
- },
- // You can also pass your custom CSS classes
- bellIcon: "custom-bell-icon p-4 bg-white rounded-full",
- bellDot: {
- colorBackground: "red",
- colorForeground: "white",
- borderRadius: "0.5rem",
- },
- },
-};
-
-export function Novu() {
- return (
-
- );
-}
-```
-
-### Using Tailwind CSS
-
-You can also use Tailwind CSS classes to style the Inbox components. You can pass the classes
-directly to the `elements` object.
-
-```tsx
-import { Inbox } from "@novu/react";
-
-const appearance = {
- elements: {
- bellIcon: "p-4 bg-white rounded-full",
- notification:
- "bg-white rounded-lg shadow-sm hover:shadow-md hover:bg-gray-50",
- },
-};
-
-export function Novu() {
- return (
-
- );
-}
-```
-
-### Using CSS Modules
-
-You can also use `CSS Modules` to style the Inbox components. Here's how you can do it:
-
-- Create a CSS module file `(e.g. styles.module.css)` with the styles you want to apply to the Inbox components.
-
-```css
-.bellIcon {
- padding: 1rem;
- background-color: white;
- border-radius: 50%;
-}
-
-.bellIcon:hover {
- background-color: #f9fafb;
-}
-
-.notification {
- background-color: white;
- border-radius: 0.5rem;
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-.notification:hover {
- background-color: #f9fafb;
-}
-```
-
-- Import the CSS module file and pass the classes to the elements object.
-
-```tsx
-import { Inbox } from "@novu/react";
-import styles from "./styles.module.css";
-
-const appearance = {
- elements: {
- bellIcon: styles.bellIcon,
- notification: styles.notification,
- },
-};
-
-export function Novu() {
- return (
-
- );
-}
-```
-
-### Using Styles Object
-
-You can also use a styles object to style the Inbox components. You can pass the styles
-directly to the `elements` object.
-
-```tsx
-import { Inbox } from "@novu/react";
-
-const appearance = {
- elements: {
- bellIcon: {
- padding: "1rem",
- backgroundColor: "white",
- borderRadius: "50%",
- },
- notification: {
- backgroundColor: "white",
- borderRadius: "0.5rem",
- boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
- },
- },
-};
-
-export function Novu() {
- return (
-
- );
-}
-```
-
-## Localization Prop
-
-The `localization` prop can be used to to change the copywriting of the Inbox to a different language for your users or change the wording to suit your product. See the list of [available keys](https://github.com/novuhq/novu/blob/next/packages/js/src/ui/config/defaultLocalization.ts#L1).
-
-```tsx
-import { Inbox } from "@novu/react";
-
-function Novu() {
- return (
-
- );
-}
-```
diff --git a/inbox/react/get-started.mdx b/inbox/react/get-started.mdx
index 45526937..a0773dec 100644
--- a/inbox/react/get-started.mdx
+++ b/inbox/react/get-started.mdx
@@ -1,42 +1,133 @@
---
title: 'React Get Started'
-sidebarTitle: 'Get Started'
+sidebarTitle: 'Quickstart'
description: 'Learn how to add novu powered In-App Inbox to your React app'
---
Novu provides the `@novu/react` package that helps to add a fully functioning Inbox to your web application in minutes. Let's see how easily you can use it in your application.
-1. Install `@novu/react` npm package in your react app
-
-```tsx
-npm install @novu/react
-```
-
-2. Add the below code in the app.tsx file
-
-```tsx
-import { Inbox } from '@novu/react';
-
-function Novu() {
- return (
-
- );
-}
-```
-
-💡 You can find the `applicationIdentifier` in the Novu Dashboard under the [API keys page](https://dashboard.novu.co/api-keys).
-The `subscriberId` is the unique identifier of the user in your application.
-
-3. Run the app
-
-You can now run the app and [trigger](/concepts/trigger) the events to see the Inbox in action.
-
-
-
-
+
+
+ ```bash
+ npm install @novu/react
+ ```
+
+
+
+ ```tsx Next.js
+ import { Inbox } from '@novu/react';
+ import { useRouter } from 'next/navigation'
+
+ function Novu() {
+ const router = useRouter();
+
+ return (
+ router.push(path)}
+ />
+ );
+ }
+ ```
+
+ ```tsx Remix
+ import { Inbox } from '@novu/react';
+ import { useNavigate } from '@remix-run/react';
+
+ function Novu() {
+ const navigate = useNavigate();
+
+ return (
+ navigate(path)}
+ />
+ );
+ }
+ ```
+
+ ```tsx React Router
+ import { Inbox } from '@novu/react';
+ import { useNavigate } from 'react-router-dom';
+
+ function Novu() {
+ const navigate = useNavigate();
+
+ return (
+ navigate(path)}
+ />
+ );
+ }
+ ```
+
+ ```tsx Gatsby
+ import { Inbox } from '@novu/react';
+ import { navigate } from 'gatsby';
+
+ function Novu() {
+ return (
+ navigate(path)}
+ />
+ );
+ }
+ ```
+
+ ```tsx Create React App
+ import { Inbox } from '@novu/react';
+ import { useNavigate } from 'react-router-dom';
+
+ function Novu() {
+ const navigate = useNavigate();
+
+ return (
+ navigate(path)}
+ />
+ );
+ }
+ ```
+
+
+
+ You can find the `applicationIdentifier` in the Novu Dashboard under the [API keys page](https://dashboard.novu.co/api-keys).
+ The `subscriberId` is the unique identifier of the user in your application, learn more about subscribers [here](/concepts/subscribers).
+
+
+ Novu uses the `routerPush` prop to make your notifications navigatable. We will automatically pass the `redirect.url` from your workflow definitions to the `routerPush` prop.
+
+
+ Now that you have the inbox component added to your application, you can trigger an Inbox notification to see it in action.
+ To create your first workflow, follow our [quickstart guide](/quickstart/overview).
+
+
+
+
+
+
+
+## Next Steps
+
+
+
+ Learn how to customize the inbox with your own branding and design.
+
+
+ Learn more about the composable components of the inbox.
+
+
## Frequently Asked Questions
diff --git a/inbox/react/localization.mdx b/inbox/react/localization.mdx
new file mode 100644
index 00000000..d06d4316
--- /dev/null
+++ b/inbox/react/localization.mdx
@@ -0,0 +1,33 @@
+---
+title: 'Localizing the Inbox component'
+sidebarTitle: 'Localization'
+description: 'Learn how to localize the pre built Inbox component'
+---
+
+## Localization Prop
+
+The `localization` prop can be used to change the copywriting of the Inbox to a different language for your users or change the wording to suit your product. See the list of [available keys](https://github.com/novuhq/novu/blob/next/packages/js/src/ui/config/defaultLocalization.ts#L1), or use the fully typed TS auto complete to find the key you need.
+
+```tsx
+import { Inbox } from '@novu/react';
+
+function Novu() {
+ return (
+
+ );
+}
+```
\ No newline at end of file
diff --git a/inbox/react/multiple-tabs.mdx b/inbox/react/multiple-tabs.mdx
index 21b50d4a..9b123990 100644
--- a/inbox/react/multiple-tabs.mdx
+++ b/inbox/react/multiple-tabs.mdx
@@ -1,11 +1,11 @@
---
title: 'Configuring Multiple Tabs'
-sidebarTitle: 'Multiple Tabs'
+sidebarTitle: 'Tabs'
---
Novu enables the creation of a multi-tab experience for the Inbox, allowing you to filter and display notification lists within distinct UI tabs.
-### Defining tabs
+## Defining tabs
Define the `tabs` prop to display multiple tabs in the Inbox component.
@@ -45,7 +45,7 @@ function Novu() {
```
-
+ Here tab value is taken from workflow tags. Tags can be configured in options field of [workflow](/sdks/framework/typescript/workflow).
diff --git a/inbox/react/preference.mdx b/inbox/react/preference.mdx
deleted file mode 100644
index fb537e61..00000000
--- a/inbox/react/preference.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: 'Subscriber Preference'
-sidebarTitle: 'Preference'
----
-
-By default, Novu will show the subscriber preferences cog icon on the Inbox component.
-
-Users can enable/disable any active channel in the workflow using subscriber preferences or they can update the preference globally for all workflows under the `Global Preferences`.
-
-
diff --git a/inbox/react/styling.mdx b/inbox/react/styling.mdx
new file mode 100644
index 00000000..54dbcc3d
--- /dev/null
+++ b/inbox/react/styling.mdx
@@ -0,0 +1,251 @@
+---
+title: 'Styling the Inbox component'
+sidebarTitle: 'Styling'
+description: 'Learn how to style the pre built Inbox component'
+---
+
+## Customization Hierarchy
+
+The Inbox component is built to allow for multiple layers of styling, which allows the specificity required to style the Inbox to meet the requirements of your use case.
+
+Depending on the level of customization you need, you can choose to style the inbox using one of the following approaches:
+- [Appearance Prop](#appearance-prop)
+ - [Variables](#variables) - Global primitives such as buttons, popovers, dropdowns and etc...
+ - [Elements](#elements) - Style individual elements
+- [Custom notification rendering](#render-notification-component) - Render a custom notification item with complete control
+- [Custom Composition](/inbox/react/components/overview#composition) - Compose our components for custom layouts
+
+## Appearance Prop
+
+The `appearance` prop can be used to customise the Inbox. It has three main keys: `baseTheme`, `variables` and `elements`.
+
+- **Variables**: Global styling variables that apply to multiple elements within the inbox.
+- **Elements**: Elements are the individual UI components that make up the Inbox.
+- **Base Theme**: This is the default theme that comes with the inbox out of the box.
+
+### Variables
+
+Variables are used to define global styling properties that can be reused throughout the inbox.
+You might want to use variables to the styling of multiple components at once, for example, if you want to change the border radius of all the components at once, you can do so by updating the `colorPrimary` variable, which will modify the CTA buttons, unseen counter and etc...
+
+
+
+
+ The background color of the inbox component.
+
+
+
+ The primary text color used in the inbox.
+
+
+
+ The main accent color for interactive elements.
+
+
+
+ The text color used on primary-colored elements.
+
+
+
+ A secondary color for less prominent elements.
+
+
+
+ The text color used on secondary-colored elements.
+
+
+
+ The background color of notification counters.
+
+
+
+ The text color used in notification counters.
+
+
+
+ A neutral color used for borders or backgrounds.
+
+
+
+ The base font size for text in the inbox.
+
+
+
+ The border radius applied to various elements.
+
+
+
+
+
+
+
+
+
+#### Styling Variables
+
+You can override the default elements by passing your own styles or CSS classes to the `elements` object.
+
+```tsx
+const appearance = {
+ variables: {
+ colorBackground: 'yellow',
+ }
+};
+
+
+```
+
+### Elements
+The `elements` object allows you to define styles for these components. Each key corresponds to an component, and the value is an object containing `style properties` or you can also pass your `css classes`.
+Here's a list of available elements that can be styled using the `elements` object in your appearance configuration:
+
+#### Finding element selectors
+You can inspect the elements you want to customize using the browser's dev tools, each element has a unique selector that you can use to style starting with `nv-`.
+
+Strip the `nv-` prefix when and add it to the `elements` object. For example, to style the `nv-notificationPrimaryAction__button` element, you can add the following to the `elements` object:
+
+```tsx
+const appearance = {
+ elements: {
+ 'notificationPrimaryAction__button': {
+ backgroundColor: 'red',
+ },
+ },
+}
+```
+
+
+
+
+
+
+ Any selector that appears before the 🔔 emoji, can be targeted via the elements property in Appearance prop (stripping the `nv-` prefix). You can also use TS autocomplete to find the available elements.
+
+
+### Bring your own CSS
+
+You can override the default elements by passing your own styles or CSS classes to the `elements` object.
+
+#### Using Tailwind CSS
+
+You can also use Tailwind CSS classes to style the Inbox components. You can pass the classes
+directly to the `elements` object.
+
+```tsx
+import { Inbox } from "@novu/react";
+
+const appearance = {
+ elements: {
+ bellIcon: "p-4 bg-white rounded-full",
+ notification:
+ "bg-white rounded-lg shadow-sm hover:shadow-md hover:bg-gray-50",
+ },
+};
+
+export function Novu() {
+ return (
+
+ );
+}
+```
+
+#### Using CSS Modules
+
+You can also use `CSS Modules` to style the Inbox components. Here's how you can do it:
+
+- Create a CSS module file `(e.g. styles.module.css)` with the styles you want to apply to the Inbox components.
+
+```css
+.bellIcon {
+ padding: 1rem;
+ background-color: white;
+ border-radius: 50%;
+}
+
+.bellIcon:hover {
+ background-color: #f9fafb;
+}
+
+.notification {
+ background-color: white;
+ border-radius: 0.5rem;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.notification:hover {
+ background-color: #f9fafb;
+}
+```
+
+- Import the CSS module file and pass the classes to the elements object.
+
+```tsx
+import { Inbox } from "@novu/react";
+import styles from "./styles.module.css";
+
+const appearance = {
+ elements: {
+ bellIcon: styles.bellIcon,
+ notification: styles.notification,
+ },
+};
+
+export function Novu() {
+ return (
+
+ );
+}
+```
+
+#### Using Styles Object
+
+You can also use a styles object to style the Inbox components. You can pass the styles
+directly to the `elements` object.
+
+```tsx
+import { Inbox } from "@novu/react";
+
+const appearance = {
+ elements: {
+ bellIcon: {
+ padding: "1rem",
+ backgroundColor: "white",
+ borderRadius: "50%",
+ },
+ notification: {
+ backgroundColor: "white",
+ borderRadius: "0.5rem",
+ boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+ },
+ },
+};
+
+export function Novu() {
+ return (
+
+ );
+}
+```
+
+## Render Notification Component
+
+You can render your own custom notification item component by passing a `renderNotification` prop to the `Inbox` or `Notifications` component, this will allow you to style and render more complex notification items.
+
+```tsx
+ {
+ return
+}} />
+```
+
diff --git a/guides/integrations/segment.mdx b/integrations/segment.mdx
similarity index 100%
rename from guides/integrations/segment.mdx
rename to integrations/segment.mdx
diff --git a/mint.json b/mint.json
index a60cd11c..2470bb26 100644
--- a/mint.json
+++ b/mint.json
@@ -2,8 +2,8 @@
"$schema": "https://mintlify.com/schema.json",
"name": "Novu",
"logo": {
- "dark": "/logo/novu-logo-placeholder.svg",
- "light": "/logo/novu-logo-placeholder.svg"
+ "dark": "/logo/logo-dark-bg.svg",
+ "light": "/logo/logo-light-bg.svg"
},
"openapi": "https://api.novu.co/openapi.json",
"favicon": "/favicon.png",
@@ -23,36 +23,41 @@
},
"topbarLinks": [
{
- "name": "Get API Key",
- "url": "https://dashboard.novu.co/api-keys/Development?utm_campaign=docs-menu-apikey"
+ "name": "Pricing",
+ "url": "https://novu.co/pricing/?utm_campaign=docs_top_nav"
+ },
+ {
+ "name": "Blog",
+ "url": "https://novu.co/blog/?utm_campaign=docs_top_nav"
+ },
+ {
+ "name": "Contact us",
+ "url": "https://novu.co/contact-us/?utm_campaign=docs_top_nav"
}
],
"topbarCtaButton": {
- "type": "github",
- "url": "https://github.com/novuhq/novu"
+ "name": "Get Started",
+ "url": "https://dashboard.novu.co/?utm_campaign=docs_top_bar_gs"
},
"anchors": [],
"tabs": [
- {
- "name": "API Reference",
- "url": "api-reference"
+ {
+ "name": "",
+ "url": "inbox"
},
{
"name": "Integrations",
"url": "integrations"
},
+
{
- "name": "Inbox",
- "url": "inbox"
+ "name": "API Reference",
+ "url": "api-reference"
},
{
"name": "SDKs",
"url": "sdks"
},
- {
- "name": "Guides",
- "url": "guides"
- },
{
"name": "Recipes",
"url": "recipes"
@@ -121,10 +126,19 @@
"icon": "react",
"pages": [
"inbox/react/get-started",
- "inbox/react/customization",
- "inbox/react/components",
- "inbox/react/preference",
+ "inbox/react/styling",
+ {
+ "group": "Components",
+ "pages": [
+ "inbox/react/components/overview",
+ "inbox/react/components/inbox",
+ "inbox/react/components/bell",
+ "inbox/react/components/notifications",
+ "inbox/react/components/preferences"
+ ]
+ },
"inbox/react/multiple-tabs",
+ "inbox/react/localization",
"inbox/react/advanced-configuration",
"inbox/react/migration-guide"
]
@@ -496,8 +510,8 @@
]
},
{
- "group": "Integration Guides",
- "pages": ["guides/integrations/segment"]
+ "group": "Trigger Integrations",
+ "pages": ["integrations/segment"]
}
],
"backgroundImage": "/background.png",
@@ -538,6 +552,10 @@
"source": "/guides/echo-guides/echo-remix",
"destination": "/guides/framework-guides/framework-remix"
},
+ {
+ "source": "/guides/integrations/segment",
+ "destination": "/integrations/segment"
+ },
{
"source": "/guides/echo-guides/echo-svelte",
"destination": "/guides/framework-guides/framework-svelte"
diff --git a/style.css b/style.css
index 457404f1..e69de29b 100644
--- a/style.css
+++ b/style.css
@@ -1,27 +0,0 @@
-#sidebar {
- top: 12rem;
-}
-
-#content-side-layout {
- top: 14rem;
-}
-
-#content-container > div {
- padding-top: 14.5rem;
-}
-
-/* Remove the logo */
-/*
-#navbar > div#primary-nav + div a[href="/"] {
- display: none;
-}
-
-*/
-
-#navbar > div#primary-nav + div a[href="/"]:has(img) {
- display: none;
-}
-
-#navbar > div#primary-nav + div div.relative {
- margin-left: 0;
-}
diff --git a/topnav.js b/topnav.js
deleted file mode 100644
index 18ae391e..00000000
--- a/topnav.js
+++ /dev/null
@@ -1,215 +0,0 @@
-const topNavLinks = [
- {
- label: "Pricing",
- url: "https://novu.co/pricing/?utm_campaign=docs_top_nav",
- },
- { label: "Blog", url: "https://novu.co/blog/?utm_campaign=docs_top_nav" },
- {
- label: "Contact us",
- url: "https://novu.co/contact-us/?utm_campaign=docs_top_nav",
- },
-];
-
-const topNavCta = {
- label: "Get Started",
- url: "https://dashboard.novu.co?utm_campaign=docs_top_bar_gs",
-};
-
-const darkLogo = `
-`;
-
-const lightLogo = `
-`;
-
-const navbar = document.getElementById("navbar");
-
-const navItemClassStyles =
- "font-medium text-gray-600 dark:text-gray-400 hover:border-b-[1.5px] hover:border-gray-200 dark:hover:border-gray-700 hover:text-gray-800 dark:hover:text-gray-300";
-
-// Create the navigation component
-const navComponent = document.createElement("div");
-navComponent.id = "primary-nav";
-navComponent.innerHTML = `
-
+
+
+### Preferences Component
+
+The `Preferences` component is used to display the preferences. It can be used to show the preferences.
+Use the `Preferences` component to show the preferences without the bell and popover.
+
+```tsx
+import { Inbox, Preferences } from '@novu/react';
+
+function Novu() {
+ return (
+ 
-
+
+ 
+
+
+#### Styling Variables
+
+You can override the default elements by passing your own styles or CSS classes to the `elements` object.
+
+```tsx
+const appearance = {
+ variables: {
+ colorBackground: 'yellow',
+ }
+};
+
+
+
+
+