Notifications - Dialect Developer Documentation

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

Choose this component if you want:

✅ 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

"use client";

import "@dialectlabs/react-ui/index.css";
import { DialectSolanaSdk } from "@dialectlabs/react-sdk-blockchain-solana";
import { Notifications } from "@dialectlabs/react-ui";

const DAPP_ADDRESS = process.env.NEXT_PUBLIC_DIALECT_DAPP_ADDRESS!;

export function MyNotificationFeed() {
  return (
    <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
      <div className="w-96 h-screen bg-white border-l shadow-lg">
        <Notifications />
      </div>
    </DialectSolanaSdk>
  );
}

With Close Button

If you want users to be able to close the notification panel:

"use client";

import "@dialectlabs/react-ui/index.css";
import { DialectSolanaSdk } from "@dialectlabs/react-sdk-blockchain-solana";
import { Notifications } from "@dialectlabs/react-ui";
import { useState } from "react";

const DAPP_ADDRESS = process.env.NEXT_PUBLIC_DIALECT_DAPP_ADDRESS!;

export function NotificationPanel() {
  const [isOpen, setIsOpen] = useState(true);
  
  if (!isOpen) return null;

   return (
        <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
            {isOpen ? (
                <div className="fixed top-0 w-96 h-screen bg-white">
                    <Notifications setOpen={setIsOpen} />
                </div>
            ) : (
                <button onClick={() => setIsOpen(true)}>
                    Open Notifications
                </button>
            )}
        </DialectSolanaSdk>
   );
}

Configuration Options

Channel Configuration

Control which additional notification channels users can configure:

// Show all additional channels (default)
<Notifications />

// Limit to specific additional channels  
<Notifications channels={["email"]} />

Available additional channels:

"email" - Email notifications
"telegram" - Telegram bot notifications
In-app - Always enabled (not configurable)

Custom Styling

CSS Variables Overview

The Notifications component uses CSS custom properties for complete theme control:

/* Import Dialect styles first */
@import url('@dialectlabs/react-ui/index.css');

.dialect {
  /* Brand colors */
  --dt-accent-brand: #09cbbf;
  --dt-accent-error: #f62d2d;
  
  /* Background colors */
  --dt-bg-primary: #ffffff;
  --dt-bg-secondary: #f9f9f9;
  --dt-bg-tertiary: #f2f3f5;
  
  /* Text colors */
  --dt-text-primary: #232324;
  --dt-text-secondary: #434445;
  --dt-text-tertiary: #737373;
  
  /* Border radius */
  --dt-border-radius-s: 0.5rem;
  --dt-border-radius-m: 0.75rem;
}

Basic Brand Customization

Override CSS variables to match your brand:

.dialect {
  --dt-accent-brand: #your-brand-color;
  --dt-bg-primary: #your-background;
  --dt-text-primary: #your-text-color;
}

Important: Import order matters:

// ✅ Correct order
import "@dialectlabs/react-ui/index.css";  // Import first
import "./custom-dialect-styles.css";      // Then your overrides

Complete CSS Variable Reference

Colors
Spacing & Layout

.dialect {
  /* Brand & Accent */
  --dt-accent-brand: #09cbbf;
  --dt-accent-error: #f62d2d;
  --dt-brand-transparent: #b3b3b31a;
  
  /* Backgrounds */
  --dt-bg-brand: #ebebeb;
  --dt-bg-primary: #ffffff;
  --dt-bg-secondary: #f9f9f9;
  --dt-bg-tertiary: #f2f3f5;
  
  /* Buttons */
  --dt-button-primary: #2a2a2b;
  --dt-button-primary-disabled: #656564;
  --dt-button-primary-hover: #434445;
  --dt-button-secondary: #ebebeb;
  --dt-button-secondary-disabled: #f2f3f5;
  --dt-button-secondary-hover: #f2f3f5;
  
  /* Icons */
  --dt-icon-primary: #2a2a2b;
  --dt-icon-secondary: #888989;
  --dt-icon-tertiary: #b3b3b3;
  
  /* Text */
  --dt-text-accent: #08c0b4;
  --dt-text-inverse: #ffffff;
  --dt-text-primary: #232324;
  --dt-text-quaternary: #888989;
  --dt-text-secondary: #434445;
  --dt-text-tertiary: #737373;
}

.dialect {
  /* Border radius */
  --dt-border-radius-xs: 0.375rem;
  --dt-border-radius-s: 0.5rem;
  --dt-border-radius-m: 0.75rem;
  --dt-border-radius-l: 1rem;
  
  /* Borders & Strokes */
  --dt-stroke-primary: #dee1e7;
  
  /* Inputs */
  --dt-input-checked: #09cbbf;
  --dt-input-primary: #dee1e7;
  --dt-input-secondary: #ffffff;
  --dt-input-unchecked: #d7d7d7;
}

Dark Theme

The component automatically applies dark theme when using the theme prop:

<Notifications theme="dark" />

You can also customize dark theme colors:

.dialect[data-theme="dark"] {
  --dt-accent-brand: #09cbbf;
  --dt-bg-primary: #1b1b1c;
  --dt-bg-secondary: #232324;
  --dt-bg-tertiary: #2a2a2b;
  --dt-text-primary: #ffffff;
  --dt-text-secondary: #c4c6c8;
  /* ... customize other dark theme variables */
}

Auto Theme Detection

Automatically switch themes based on user preferences:

import { useState, useEffect } from 'react';

export function ThemeAwareNotifications() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    setTheme(mediaQuery.matches ? 'dark' : 'light');

    const handler = (e: MediaQueryListEvent) => {
      setTheme(e.matches ? 'dark' : 'light');
    };
    
    mediaQuery.addEventListener('change', handler);
    return () => mediaQuery.removeEventListener('change', handler);
  }, []);

  return (
    <div data-theme={theme}>
      <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
        <Notifications theme={theme} />
      </DialectSolanaSdk>
    </div>
  );
}

Layout Integration Examples

export function AppWithNotificationSidebar() {
  const [showNotifications, setShowNotifications] = useState(false);

  return (
    <div className="flex h-screen">
      <main className="flex-1 p-6">
        <button 
          onClick={() => setShowNotifications(!showNotifications)}
          className="bg-blue-500 text-white px-4 py-2 rounded"
        >
          {showNotifications ? 'Hide' : 'Show'} Notifications
        </button>
      </main>
      
      {showNotifications && (
        <aside className="w-96 border-l bg-gray-50">
          <div className="p-4 border-b">
            <h2 className="text-lg font-semibold">Notifications</h2>
          </div>
          
          <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
            <Notifications setOpen={setShowNotifications} />
          </DialectSolanaSdk>
        </aside>
      )}
    </div>
  );
}

import { Dialog } from '@headlessui/react';

export function NotificationModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button 
        onClick={() => setIsOpen(true)}
        className="relative p-2 rounded-full bg-gray-100"
      >
        🔔
      </button>

      <Dialog open={isOpen} onClose={setIsOpen}>
        <div className="fixed inset-0 bg-black/30" />
        <div className="fixed inset-0 flex items-center justify-center p-4">
          <Dialog.Panel className="bg-white rounded-lg w-96 h-96">
            <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
              <Notifications setOpen={setIsOpen} />
            </DialectSolanaSdk>
          </Dialog.Panel>
        </div>
      </Dialog>
    </>
  );
}

Full Page Integration

export function NotificationsPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white border-b px-6 py-4">
        <h1 className="text-2xl font-bold">Your Notifications</h1>
      </header>
      
      <main className="max-w-2xl mx-auto p-6">
        <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
          <Notifications />
        </DialectSolanaSdk>
      </main>
    </div>
  );
}

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

Component not displaying:

Verify dappAddress is correct and app is registered
Check wallet connection status
Ensure parent container has appropriate dimensions

Performance issues:

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

The Notifications component provides complete control over notification display and styling, perfect for creating fully branded notification experiences.

​Overview

​Prerequisites

​Basic Usage

​Simple Integration

​With Close Button

​Configuration Options

​Channel Configuration

​Custom Styling

​CSS Variables Overview

​Basic Brand Customization

​Complete CSS Variable Reference

​Dark Theme

​Auto Theme Detection

​Layout Integration Examples

​Sidebar Integration

​Modal Integration

​Full Page Integration

​Troubleshooting

​Next Steps