Blocks / Shell

Notifications

Notification bell with an unread badge and dropdown, plus a full notifications page with mark-as-read and load-more, backed by the framework's notification records.

$pnpm exec shadcn add @intelligo/notifications

Run it inside an app made by intelligo create. Anywhere else, name the registry and install the base first.

Loading preview…
about this block

Notification bell with an unread badge and dropdown, plus a full notifications page with mark-as-read and load-more, backed by the framework's notification records.

yours to edit
  • lib/notification-types.tsx

messages/en/notifications.json

Everything else is used verbatim; a deployment varies through these files and translations.How seams work →

requires
built from

button, popover, scroll-area, separator, skeleton, page-header, ai-motion, animated-list, notification-stack

npm packages it adds

@intelligo-dev/auth · @intelligo-dev/core · @intelligo-dev/next · lucide-react · next-intl

what shadcn add writes · 10 files
Routes
  • app/[locale]/(app)/notifications/page.tsx
  • app/[locale]/(app)/notifications/loading.tsx
  • app/[locale]/(app)/notifications/error.tsx
Components
  • components/notifications/notification-bell.tsx
  • components/notifications/notification-list.tsx
  • components/notifications/notification-item.tsx
Hooks
  • hooks/use-notifications.ts
Actions, config and messages
  • actions/notifications.ts
  • lib/notification-types.tsx
  • messages/en/notifications.json

Ready to try it? Three commands and the app runs against a stub model.