Overview
Notifications
gives you maximum flexibility:
- Headless component - no built-in button or modal
- Full CSS control via CSS custom properties
- Embed anywhere - sidebars, modals, dedicated pages
- Complete brand integration with custom themes
- Advanced styling for individual notification types
- ✅ Complete design control and custom styling
- ✅ Embed in your own modal, sidebar, or layout
- ✅ Full brand integration with CSS variables
- ✅ Custom notification type styling
- ❌ Need to build your own button/modal logic
Prerequisites
Before implementing the Notifications component, ensure you have completed:- App Registration: Your app must be registered with Dialect (registration guide)
- SDK Setup: Configure the Dialect React SDK (Setup & Configuration guide)
- User Management Understanding: Familiarize yourself with subscriptions and channels (User Management guide)
Basic Usage
Simple Integration
With Close Button
If you want users to be able to close the notification panel:Configuration Options
Channel Configuration
Control which additional notification channels users can configure:"email"
- Email notifications"telegram"
- Telegram bot notifications- In-app - Always enabled (not configurable)
Custom Styling
CSS Variables Overview
TheNotifications
component uses CSS custom properties for complete theme control:
Basic Brand Customization
Override CSS variables to match your brand:Complete CSS Variable Reference
- Colors
- Spacing & Layout
Dark Theme
The component automatically applies dark theme when using thetheme
prop:
Auto Theme Detection
Automatically switch themes based on user preferences:Layout Integration Examples
Sidebar Integration
Modal Integration
Full Page Integration
Troubleshooting
Styling not applying:- Ensure CSS import order is correct
- Check CSS specificity - you may need
!important
- Verify CSS variables are defined on
.dialect
class
- Verify
dappAddress
is correct and app is registered - Check wallet connection status
- Ensure parent container has appropriate dimensions
- Consider lazy loading for modals/conditional displays
- Use CSS containment for better rendering performance
- Implement virtualization for large notification lists
Next Steps
- Need a simpler solution? Use the NotificationsButton component
- Want to send notifications? Check the Send SDK documentation
Notifications
component provides complete control over notification display and styling, perfect for creating fully branded notification experiences.