Skip to main content
Docs

Notifications Example

Demonstrates the shared notification components from @classic-homes/theme-svelte and utilities from @classic-homes/notifications.

View Docs
NotificationBadge NotificationItem NotificationList NotificationDialog NotificationFilters NotificationBulkActions

Toast Notifications

Quick feedback messages that appear temporarily

NotificationBadge Component

Unread count indicator for bell icons

3

Default

3

Small

3

Large

99+

With max (99+)

Notification Center 3 new

Persistent notifications with filtering and bulk actions

Info

Check out the new dashboard analytics feature. It provides real-time insights into your data with beautiful charts and graphs.

5m ago
View Dashboard

Update

Your payment of $99.00 has been processed successfully. Thank you for your business!

30m ago

Alert high

You have used 90% of your storage quota. Consider upgrading your plan or removing unused files.

2h ago
Manage Storage

Security urgent

A new login was detected from Chrome on Windows. If this was not you, please secure your account immediately.

yesterday
Review Activity

Feature low

We just launched a powerful new report builder. Create custom reports with drag-and-drop simplicity.

2d ago

Using the Shared Components

Import and use the notification components

// Import notification components from separate entry point
// Note: Requires @classic-homes/notifications to be installed
import {
  NotificationList,
  NotificationItem,
  NotificationBadge,
  NotificationDialog,
  NotificationFilters,
  NotificationBulkActions,
} from '@classic-homes/theme-svelte/notifications';

// Import types and utilities from notifications package
import {
  type Notification,
  type NotificationFilter,
  type NotificationCounts,
  formatRelativeTime,
  getNotificationIconName,
  getPriorityBadgeVariant,
} from '@classic-homes/notifications/core';

// Use the notification store for API integration
import { notificationStore } from '@classic-homes/notifications/svelte';

// Example: Display a notification badge
<NotificationBadge count={unreadCount} />

// Example: Display a filterable notification list
<NotificationFilters bind:filter {counts} />
<NotificationList
  {notifications}
  selectable={true}
  onNotificationClick={handleClick}
/>

// Example: Show notification details in a dialog
<NotificationDialog
  {notification}
  bind:open={dialogOpen}
  onMarkRead={markAsRead}
  onDelete={deleteNotification}
/>
← Back to Examples