Labels.io

Notifications

An in-app notification bell with an optional realtime upgrade.

The kit ships a complete notification system as UI: a bell with an unread dot in the app topbar, a dropdown panel with read/unread states, and mark-all-read. app/lib/notifications.tsx provides everything from mock items.

Why there is a bell on the marketing site too

The bell in the marketing header exists so you can try the feature without signing in. It is demo scaffolding; make-it-yours.md removes it and keeps the real one in the app topbar.

Wiring it

Say "add notifications". The wire-notifications.md skill creates a notifications table with row-level security in Supabase and swaps the mock provider for a fetch-on-load version.

Realtime is opt-in. Live push via Supabase Realtime is behind a flag:

VITE_REALTIME_NOTIFICATIONS=true

It stays off by default because realtime connections count against your Supabase quota (200 concurrent on Free, 500 on Pro). Fetch-on-load is the right default until you have the traffic to justify it.

On this page