> ## Documentation Index > Fetch the complete documentation index at: https://docs.appsloth.com/llms.txt > Use this file to discover all available pages before exploring further. # Inbox > Add a customizable notification inbox to your application with AppSloth ## Prerequisites Before using the AppSloth Inbox component, make sure you've: 1. [Set up AppSloth](/quickstart) in your project 2. Installed the required shadcn/ui components: ```bash theme={null} npx shadcn-ui@latest add button dropdown-menu badge input tabs ``` ## Adding the Inbox Component The AppSloth Inbox component provides a customizable notification center for your application. It includes features like real-time notifications, tabbed interface for new and archived notifications, search functionality, and customizable styling. Adding the Inbox component to your application is straightforward: ```jsx Next.js App Router {3,14} theme={null} // app/layout.js or app/layout.tsx import { AppSlothProvider } from 'appsloth/provider'; import { Inbox } from 'appsloth/inbox'; export default function RootLayout({ children }) { return (
{children}
); } ``` ```jsx Next.js Pages Router {3,9} theme={null} // pages/_app.js or pages/_app.tsx import { AppSlothProvider } from "appsloth/provider"; import { Inbox } from "appsloth/inbox"; function MyApp({ Component, pageProps }) { return (
); } export default MyApp; ``` ```jsx React {3,9} theme={null} // src/App.jsx or src/App.tsx import { AppSlothProvider } from "appsloth/provider"; import { Inbox } from "appsloth/inbox"; function App() { return (
); } export default App; ``` Position your Inbox component where it's easily accessible to users. Common placements include the navigation bar or header area, typically aligned to the right side. ## How It Works The Inbox component provides a comprehensive notification system: 1. **Real-time Updates**: Automatically polls for new notifications 2. **Tabbed Interface**: Separate tabs for new and archived notifications 3. **Search Functionality**: Search through archived notifications 4. **Unread Badges**: Visual indicator for unread notifications 5. **Customizable UI**: Extensive styling and configuration options 6. **Timestamp Display**: Configurable timestamp formatting ```jsx theme={null} import { Inbox } from 'appsloth/inbox'; // Basic implementation // Customized implementation ``` ## Customization Options The Inbox component is highly customizable through props: ### Button and Badge Customization Customize the trigger button and unread badge: ```jsx theme={null} import { Bell } from "lucide-react"; , variant: "ghost", size: "icon", className: "my-custom-class", }} unreadBadge={{ variant: "destructive", position: { top: "-1px", right: "-1px" }, className: "badge-custom", }} />; ``` ### Tab Customization Customize the tabs for new and archived notifications: ```jsx theme={null} ``` ### Search and Empty States Configure search behavior and empty state messages: ```jsx theme={null} ``` ### Custom Notification Rendering Provide custom rendering for notification items: ```jsx theme={null} (

{notification.title}

{notification.description}

{notification.createdAt}
)} onNotificationClick={(notification) => { console.log("Clicked:", notification); }} /> ``` ## Component Props | Prop | Type | Default | Description | | --------------------------- | ------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------ | | `triggerButton` | `ButtonConfig` | `{ icon: , variant: "ghost", size: "icon" }` | Configuration for the trigger button | | `unreadBadge` | `BadgeConfig` | `{ variant: "destructive", position: { top: "-1px", right: "-1px" } }` | Configuration for the unread count badge | | `newTab` | `TabConfig` | `{ label: "New" }` | Configuration for the new notifications tab | | `archiveTab` | `TabConfig` | `{ label: "Archive" }` | Configuration for the archived notifications tab | | `menuWidth` | `number` | 400 | Width of the dropdown menu in pixels | | `maxHeight` | `number` | 400 | Maximum height of the notification list | | `showSearch` | `boolean` | true | Whether to show the search input in archive | | `searchPlaceholder` | `string` | "Search archived notifications..." | Placeholder text for search input | | `markAllAsReadText` | `string` | "Mark all as read" | Text for the mark all as read button | | `emptyNewMessage` | `string` | "No new notifications" | Message shown when no new notifications | | `emptyArchivedMessage` | `string` | "No archived notifications" | Message shown when no archived notifications | | `emptySearchMessage` | `string` | "No matching notifications" | Message shown when search has no results | | `pollingInterval` | `number` | 60000 | Interval for checking new notifications (ms) | | `notificationItemClassName` | `string` | "" | Additional classes for notification items | | `showTimestamps` | `boolean` | true | Whether to show timestamps | | `timestampFormat` | `"relative" \| "absolute"` | "relative" | Format for displaying timestamps | | `renderNotificationItem` | `(notification: Notification) => React.ReactNode` | undefined | Custom renderer for notifications | | `onNotificationClick` | `(notification: Notification) => void` | undefined | Callback when notification is clicked | | `dropdownClassName` | `string` | "" | Additional classes for dropdown content | ## Viewing Notifications in the Dashboard All notifications can be managed and analyzed in your AppSloth Dashboard: 1. Log into your [AppSloth Dashboard](https://dashboard.appsloth.com) 2. Navigate to the "Notifications" section 3. Manage your notifications: * Create new notifications * View delivery statistics * Analyze engagement metrics * Configure notification rules AppSloth Notifications Dashboard ## Next Steps Now that you've added AppSloth Inbox to your application, explore more features: Create eye-catching banners to highlight important announcements Collect and manage user feedback to improve your product Collect feedback and present salvage offers when users try to cancel