diff --git a/content/docs/platform/inbox/localization.mdx b/content/docs/platform/inbox/advanced-concepts/localization.mdx
similarity index 100%
rename from content/docs/platform/inbox/localization.mdx
rename to content/docs/platform/inbox/advanced-concepts/localization.mdx
diff --git a/content/docs/platform/inbox/advanced-concepts/meta.json b/content/docs/platform/inbox/advanced-concepts/meta.json
new file mode 100644
index 000000000..88641b75f
--- /dev/null
+++ b/content/docs/platform/inbox/advanced-concepts/meta.json
@@ -0,0 +1,6 @@
+{
+ "title": "Advanced Concepts",
+ "icon": "Network",
+ "pages": ["localization", "multi-tenancy"],
+ "description": "Learn how to implement localization and tenant management in the Inbox component."
+}
diff --git a/content/docs/platform/inbox/tenants.mdx b/content/docs/platform/inbox/advanced-concepts/multi-tenancy.mdx
similarity index 100%
rename from content/docs/platform/inbox/tenants.mdx
rename to content/docs/platform/inbox/advanced-concepts/multi-tenancy.mdx
diff --git a/content/docs/platform/inbox/advanced-customization/meta.json b/content/docs/platform/inbox/advanced-customization/meta.json
index c4c6efb9f..8bd73f7dc 100644
--- a/content/docs/platform/inbox/advanced-customization/meta.json
+++ b/content/docs/platform/inbox/advanced-customization/meta.json
@@ -1,6 +1,11 @@
{
"title": "Advanced Customization",
"icon": "Wand",
- "pages": ["customize-notification-ui", "html-in-notifications", "customize-bell-and-popover"],
+ "pages": [
+ "customize-notification-ui",
+ "html-in-notifications",
+ "customize-bell-and-popover",
+ "notification-click-behavior"
+ ],
"description": "Learn how to customize the appearance and behavior of the inbox component to match your application’s design system."
}
diff --git a/content/docs/platform/inbox/notification-click-behavior.mdx b/content/docs/platform/inbox/advanced-customization/notification-click-behavior.mdx
similarity index 100%
rename from content/docs/platform/inbox/notification-click-behavior.mdx
rename to content/docs/platform/inbox/advanced-customization/notification-click-behavior.mdx
diff --git a/content/docs/platform/inbox/configuration/meta.json b/content/docs/platform/inbox/configuration/meta.json
index a51ced2cd..86749b07d 100644
--- a/content/docs/platform/inbox/configuration/meta.json
+++ b/content/docs/platform/inbox/configuration/meta.json
@@ -1,6 +1,6 @@
{
- "title": "Configuration",
- "icon": "Layers",
- "pages": ["styling", "tabs", "preferences", "snooze", "data-object"],
+ "title": "Customize and configure",
+ "icon": "SlidersHorizontal",
+ "pages": ["styling", "icons", "tabs", "preferences", "snooze", "data-object"],
"description": "Learn how to configure your inbox with styling, tabs, preferences, data objects, and snooze functionality"
}
diff --git a/content/docs/platform/inbox/configuration/styling.mdx b/content/docs/platform/inbox/configuration/styling.mdx
index d496ac1b8..33559b443 100644
--- a/content/docs/platform/inbox/configuration/styling.mdx
+++ b/content/docs/platform/inbox/configuration/styling.mdx
@@ -269,66 +269,3 @@ function Novu() {
export default Novu;
```
-
-
-## Replace default icons
-
-You can replace all the default icons in the Inbox UI with custom icons from your preferred library, such as [react-icons](https://react-icons.github.io/react-icons/) or [Material Icons](https://mui.com/material-ui/material-icons/), to match your visual style using the' icons' key in the `appearance` prop.
-
-For each icon that you want to customize, provide a function that returns your custom icon as a React component.
-
-```tsx
-import { Inbox } from '@novu/react';
-import { RiSettings3Fill, RiArrowDownLine, RiNotification3Fill} from 'react-icons/ri';
-
-const appearance = {
- icons: {
- cogs: () => ,
- arrowDown: () => ,
- bell: () => ,
- },
- };
-
-export function Novu() {
- return (
-
- );
-}
-```
-
-### List of customizable icons
-
-Use these keys in the `appearance.icons` property to customize specific icons in the Inbox component:
-
-| Icon Key | Description |
-| -------------------- | ---------------------------------------------------- |
-| `arrowDown` | Down arrow used in drop-downs and expandable sections |
-| `arrowDropDown` | Drop-down arrow in menus and selectors |
-| `arrowLeft` | Left arrow used in pagination and navigation |
-| `arrowRight` | Right arrow used in pagination and navigation |
-| `bell` | Notification bell icon in the header |
-| `chat` | Chat channel icon in notification preferences |
-| `check` | Checkmark icon used for selected items |
-| `clock` | Date/time display for notifications |
-| `cogs` | Settings/preferences icon in the header |
-| `dots` | More options menu (three dots) in notification items |
-| `email` | Email channel icon in notification preferences |
-| `inApp` | In-app channel icon in notification preferences |
-| `markAsArchived` | Icon for archiving notifications |
-| `markAsArchivedRead` | Icon for marking notifications as archived and read |
-| `markAsRead` | Icon for marking notifications as read |
-| `markAsUnread` | Icon for marking notifications as unread |
-| `markAsUnarchived` | Icon for unarchiving notifications |
-| `push` | Push notification channel icon in preferences |
-| `sms` | SMS channel icon in notification preferences |
-| `trash` | Delete/remove icon for notifications |
-| `unread` | Indicator for unread notifications |
-| `unsnooze` | Icon for unsnoozed notifications |
-
-
-You can inspect the Inbox component using your browser’s developer tools to discover icon keys. Icon elements have class names that start with `nv-` and include a 🖼️ emoji for easier identification. The part following `nv-` is the icon key. For example, an element with the class `nv-cogs` has the icon key `cogs`.
-
\ No newline at end of file
diff --git a/content/docs/platform/inbox/meta.json b/content/docs/platform/inbox/meta.json
index 3a80dfe52..52afdad0e 100644
--- a/content/docs/platform/inbox/meta.json
+++ b/content/docs/platform/inbox/meta.json
@@ -5,8 +5,7 @@
"navigation-and-events",
"configuration",
"advanced-customization",
- "localization",
- "tenants",
+ "advanced-concepts",
"headless-mode",
"prepare-for-production",
"migration-guide"
diff --git a/content/docs/platform/inbox/migration-guide.mdx b/content/docs/platform/inbox/migration-guide.mdx
index a737de0d1..dc5ff13d4 100644
--- a/content/docs/platform/inbox/migration-guide.mdx
+++ b/content/docs/platform/inbox/migration-guide.mdx
@@ -119,15 +119,15 @@ type Action = {
## Getting started
-To begin migrating to `@novu/react`, install the package via npm:
+To begin, install the `@novu/react` package.
-```bash
+```package-install
npm install @novu/react
```
## Basic usage
-- Old Implementation
+### Legacy implementation with `@novu/notification-center`
```tsx
import {
@@ -148,7 +148,7 @@ function Novu() {
export default Novu;
```
-- New Implementation with `@novu/react`
+### Current implementation with `@novu/react`
```tsx
import { Inbox } from '@novu/react';
@@ -166,7 +166,7 @@ export default Novu;
The @novu/react package introduces a flexible way to display notifications as a list without the default bell icon. Use the `Inbox` and `Notifications` components to achieve this functionality.
-- Old Implementation
+### Legacy implementation with `@novu/notification-center`
```tsx
import { NovuProvider, NotificationCenter } from '@novu/notification-center';
@@ -182,7 +182,7 @@ function Novu() {
export default Novu;
```
-- New Implementation with `@novu/react`
+### Current implementation with `@novu/react`
```tsx
import { Inbox, Notifications } from '@novu/react';
@@ -202,7 +202,7 @@ export default Novu;
Customize the bell icon that triggers the notifications popover using the `renderBell` prop.
-- Old Implementation
+### Legacy implementation with `@novu/notification-center`
```tsx
import { NovuProvider, PopoverNotificationCenter } from '@novu/notification-center';
@@ -228,7 +228,7 @@ function Novu() {
export default Novu;
```
-- New Implementation with `@novu/react`
+### Current implementation with `@novu/react`
```tsx
import { Inbox } from '@novu/react';
@@ -255,7 +255,7 @@ Handle user interactions with notifications effectively using the action handler
Trigger a callback function when a user clicks on a notification item.
-- Old Implementation
+#### Legacy implementation with `@novu/notification-center`
```tsx
import {
@@ -285,7 +285,7 @@ function Novu() {
export default Novu;
```
-- New Implementation with `@novu/react`
+#### Current implementation with `@novu/react`
```tsx
import { Inbox } from '@novu/react';
@@ -312,7 +312,7 @@ export default Novu;
Handle primary and secondary actions within a notification explicitly.
-- Old Implementation
+#### Legacy implementation with `@novu/notification-center`
```tsx
import {
@@ -365,7 +365,7 @@ function Novu() {
export default Novu;
```
-- New Implementation with `@novu/react`
+#### Current implementation with `@novu/react`
```tsx
import { Inbox } from '@novu/react';
@@ -396,7 +396,7 @@ export default Novu;
## Avatar icons
-In old implementation, you could set the avatar icon for a notification by toggle on the `Add an avatar` option in the workflow UI. Novu uses the avatar field of theactor subscriber for avatar icon.
+In the legacy implementation, you could set a notification’s avatar icon by enabling the Add an avatar option in the workflow UI. Novu would then use the avatar field of the actor subscriber as the icon.
In the new implementation, you can set the avatar icon for a notification by adding the avatar icon in the workflow UI. There are three options to choose from:
@@ -404,11 +404,13 @@ In the new implementation, you can set the avatar icon for a notification by add
- Use a hard-coded avatar icon URL.
- Use a payload variable to dynamically set the avatar icon.
+For more information, refer to [Icons](/platform/inbox/configuration/icons#change-or-remove-a-in-app-notification-avatar).
+
## Popover positioning
For advanced positioning and styling of the notifications popover, integrate third-party popover libraries such as Radix UI.
-- Old Implementation
+### Legacy implementation with `@novu/notification-center`
```tsx
import {
@@ -430,7 +432,7 @@ function Novu() {
export default Novu;
```
-- New Implementation with `@novu/react` and Radix UI as an example
+### Current implementation with `@novu/react` and Radix UI as an example
```tsx
import React from 'react';
@@ -462,7 +464,7 @@ export default Novu;
Customize the appearance and structure of individual notification items using the `renderNotification` prop.
-- Old Implementation
+### Legacy implementation with `@novu/notification-center`
```tsx
import {
@@ -501,7 +503,7 @@ function Novu() {
export default Novu;
```
-- New Implementation with `@novu/react`
+### Current implementation with `@novu/react`
```tsx
import { Inbox } from '@novu/react';
@@ -535,7 +537,7 @@ export default Novu;
Customize the overall look and feel of the notification components using the appearance prop, which supports both CSS objects and class names (including Tailwind CSS classes).
-- Old Implementation
+### Legacy implementation with `@novu/notification-center`
```tsx
import {
@@ -560,7 +562,7 @@ function Novu() {
export default Novu;
```
-- New Implementation with `@novu/react`
+### Current implementation with `@novu/react`
```tsx
import { Inbox } from '@novu/react';
@@ -609,7 +611,7 @@ Organize notifications into different categories using tabs by leveraging the ta
### Create multiple tabs
-- Old implementation
+#### Legacy implementation with `@novu/notification-center`
After defining the feeds on the workflow UI, you were able to filter notifications based on the feedIdentifier.
@@ -654,7 +656,7 @@ function Novu() {
export default Novu;
```
-- New Implementation with `@novu/react`
+#### Current implementation with `@novu/react`
1. Define multiple workflows with relevant tags.
@@ -685,28 +687,7 @@ export default InboxWithTabs;
## Localization
-Customize the language and text content of the notification components using the localization prop.
-
-```tsx
-import { Inbox } from '@novu/react';
-
-function Novu() {
- return (
-
- );
-}
-
-export default Novu;
-```
+Customize the language and text content of the notification components using the localization prop. Refer to the [localization documentation](/platform/inbox/advanced-concepts/localization).
## HMAC encryption
diff --git a/content/docs/platform/inbox/setup-inbox.mdx b/content/docs/platform/inbox/setup-inbox.mdx
index a3a6d22cd..e75bbd131 100644
--- a/content/docs/platform/inbox/setup-inbox.mdx
+++ b/content/docs/platform/inbox/setup-inbox.mdx
@@ -1,55 +1,37 @@
---
title: 'Set up the Inbox'
-description: "Learn how to integrate Novu , a pre-built notification center component for real-time in-app notifications in your application."
-icon: 'LayoutDashboard'
----
-
-import { Card, Cards } from 'fumadocs-ui/components/card';
-import { MessageSquare, Palette, Zap } from 'lucide-react';
-
-The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort.
-
-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.
-
-
-
-## Getting Started
-
-
-
-
-
-
-
-## Design Files
-
-To aide your design process, we provide a free [Figma file](https://www.figma.com/community/file/1425407348374863860) that contains all of the design assets. Make a copy of the file into your own account to get started with customizing your graphical Inbox elements.
-=======
-description: 'Learn how to integrate the Novu Inbox component into your application to display real-time notifications for your users.'
+description: "Learn how to integrate the Novu Inbox component into your application to display real-time notifications for your subscribers."
icon: 'Bell'
---
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import Link from 'next/link';
-You can add the Novu Inbox component to your application with a few lines of code.
+The Inbox component displays a notification bell by default, which opens a menu containing the subscriber's notifications and preferences.
+
+## Installation
+
+To get started, install the Inbox UI:
+
+
+
+ ```package-install
+ npm install @novu/nextjs
+ ```
+
+
+ ```package-install
+ npm install @novu/react
+ ```
+
+
## Try Inbox in keyless mode
Keyless mode lets you test the look and features of the Inbox component instantly in your application, no setup required.
+
+
```tsx
@@ -75,15 +57,13 @@ Keyless mode lets you test the look and features of the Inbox component instantl
-
-
-