Merge pull request #691 from novuhq/com-192-add-appearance-prop-examp…

…les-for-different-css-methodologies

feat: examples

inbox/react/customization.mdx

@@ -1,7 +1,7 @@
 ---
-title: 'Customizing Inbox'
-sidebarTitle: 'Customization'
-description: 'Learn how to customize the pre built Inbox component using the appearance props'
+title: "Customizing Inbox"
+sidebarTitle: "Customization"
+description: "Learn how to customize the pre built Inbox component using the appearance props"
 ---
 
 ## Appearance Prop
@@ -16,58 +16,175 @@ The `appearance` prop can be used to customise the Inbox. It has three main keys
   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';
+import { Inbox } from "@novu/react";
 const appearance = {
   variables: {
-    borderRadius: '0.5rem',
+    borderRadius: "0.5rem",
   },
   elements: {
     bellContainer: {
-      colorBackground: 'white',
-      colorForeground: 'black',
-      borderRadius: '0.5rem',
+      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',
+    bellIcon: "custom-bell-icon p-4 bg-white rounded-full",
     bellDot: {
-      colorBackground: 'red',
-      colorForeground: 'white',
-      borderRadius: '0.5rem',
+      colorBackground: "red",
+      colorForeground: "white",
+      borderRadius: "0.5rem",
     },
   },
+};
+
+export function Novu() {
+  return (
+    <Inbox
+      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+      subscriberId="YOUR_SUBSCRIBER_ID"
+      appearance={appearance}
+    />
+  );
+}
+```
+
+### 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 (
+    <Inbox
+      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+      subscriberId="YOUR_SUBSCRIBER_ID"
+      appearance={appearance}
+    />
+  );
+}
+```
+
+### 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;
 }
 
-<Inbox
-  applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
-  subscriberId="YOUR_SUBSCRIBER_ID"
-  appearance={appearance}
-/>;
+.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 (
+    <Inbox
+      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+      subscriberId="YOUR_SUBSCRIBER_ID"
+      appearance={appearance}
+    />
+  );
+}
+```
+
+### 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 (
+    <Inbox
+      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+      subscriberId="YOUR_SUBSCRIBER_ID"
+      appearance={appearance}
+    />
+  );
+}
 ```
 
 ## 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';
+import { Inbox } from "@novu/react";
 
 function Novu() {
   return (
     <Inbox
       applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
       subscriberId="YOUR_SUBSCRIBER_ID"
       localization={{
-        'inbox.status.archived': 'Archived',
-        'inbox.status.unread': 'Unread',
-        'inbox.status.options.archived': 'Archived',
-        'inbox.status.options.unread': 'Unread',
-        'inbox.status.options.unreadRead': 'Unread/Read',
-        'inbox.status.unreadRead': 'Unread/Read',
-        'inbox.title': 'Inbox',
-        'notifications.emptyNotice': 'No notifications',
-        locale: 'en-US',
+        "inbox.status.archived": "Archived",
+        "inbox.status.unread": "Unread",
+        "inbox.status.options.archived": "Archived",
+        "inbox.status.options.unread": "Unread",
+        "inbox.status.options.unreadRead": "Unread/Read",
+        "inbox.status.unreadRead": "Unread/Read",
+        "inbox.title": "Inbox",
+        "notifications.emptyNotice": "No notifications",
+        locale: "en-US",
       }}
     />
   );
 }
-```
+```