If you already have an existing React/Next.js project, you can skip this step and jump directly to Step 3: Add Notification Bell. The notification bell works with any React application.
We’ll start with a fresh project using the Solana app scaffold:
Copy
Ask AI
# Create a new Solana dApp scaffoldnpx create-solana-dapp@latest alerts-tutorial# Choose your options when prompted:# - Framework: Next.js (A React framework by Vercel)# - Template: gill-next-tailwind (Next.js, Tailwind, gill based on @solana/kit, Wallet UI)# Navigate to the projectcd alerts-tutorial# Start development servernpm run dev
Add the notification bell to your app’s header next to the wallet button.
Find the header file src/components/app-header.tsx and add the notification component:
src/components/app-header.tsx
Copy
Ask AI
// Add this import at the top with the other importsimport { DialectNotificationComponent } from "@/components/DialectNotificationComponent";// Find the section with the wallet and other buttons, then add the component:<div className="hidden md:flex items-center gap-4"> <DialectNotificationComponent /> <WalletButton /> <ClusterButton /> <ThemeSelect /></div>
Want to customize the look and feel of your notification bell? Check out our Event Detection and Monitoring guide where you can see how companies like Tensor have customized the notification widget to match their brand.
API Guide - Get an overview of available API endpoints
🎉 You’re all set! You now have notifications working in your app. Your users can receive important updates directly in their wallets, and you can reach them programmatically from your backend.
Assistant
Responses are generated using AI and may contain mistakes.