Notifications

Notification center with trigger badge, slide-in panel, items with icons and actions, filters, and dropdown variant.

Trigger Button with Badge

Preview

<div class="flex items-center gap-4">
  <!-- With count -->
  <button class="notification-trigger">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
    <span class="notification-trigger-badge">3</span>
  </button>

  <!-- Dot only -->
  <button class="notification-trigger">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
    <span class="notification-trigger-badge notification-trigger-badge-dot"></span>
  </button>

  <!-- No badge -->
  <button class="notification-trigger">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4">
  <button class="relative inline-flex items-center justify-center size-11 bg-transparent border-none rounded-full text-base-content cursor-pointer hover:bg-base-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
    <span class="absolute top-1 right-1 flex items-center justify-center min-w-[18px] h-[18px] px-[5px] text-[0.6875rem] font-semibold text-white rounded-full" style="background: var(--color-error); border: 2px solid var(--color-base-100)">3</span>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required for badge display.
// Toggle panel: document.querySelector('.notification-panel').classList.toggle('notification-panel-open');

Notification Item

Preview

New update available 2m ago

Version 3.2 is now available with new features and bug fixes.

Payment received 1h ago

Your payment of $120.00 has been processed successfully.

Action required 3h ago

Please review and approve the pending request.

<div style="max-width: 400px;">
  <!-- Unread -->
  <div class="notification-item notification-item-unread">
    <div class="notification-item-icon notification-item-icon-info">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>
    </div>
    <div class="notification-item-content">
      <div class="notification-item-header">
        <span class="notification-item-title">New update available</span>
        <span class="notification-item-time">2m ago</span>
      </div>
      <p class="notification-item-message">Version 3.2 is now available with new features and bug fixes.</p>
    </div>
    <span class="notification-item-dot"></span>
  </div>

  <!-- Read -->
  <div class="notification-item">
    <div class="notification-item-icon notification-item-icon-success">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
    </div>
    <div class="notification-item-content">
      <div class="notification-item-header">
        <span class="notification-item-title">Payment received</span>
        <span class="notification-item-time">1h ago</span>
      </div>
      <p class="notification-item-message">Your payment of $120.00 has been processed successfully.</p>
    </div>
  </div>

  <!-- With actions -->
  <div class="notification-item notification-item-unread">
    <div class="notification-item-icon notification-item-icon-warning">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>
    </div>
    <div class="notification-item-content">
      <div class="notification-item-header">
        <span class="notification-item-title">Action required</span>
        <span class="notification-item-time">3h ago</span>
      </div>
      <p class="notification-item-message">Please review and approve the pending request.</p>
      <div class="notification-item-actions">
        <button class="notification-item-action-btn notification-item-action-btn-primary">Approve</button>
        <button class="notification-item-action-btn">Dismiss</button>
      </div>
    </div>
    <span class="notification-item-dot"></span>
  </div>
</div>

Requires: ux.min.css

<div style="max-width: 400px;">
  <!-- Unread -->
  <div class="flex gap-3 px-4 py-3 border-b border-base-300 cursor-pointer hover:bg-base-200" style="background: color-mix(in oklch, var(--color-primary) 5%, var(--color-base-100));">
    <div class="flex items-center justify-center size-10 shrink-0 rounded-full" style="background: color-mix(in oklch, var(--color-info) 10%, transparent); color: var(--color-info);">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>
    </div>
    <div class="flex-1 min-w-0">
      <div class="flex items-start justify-between gap-2 mb-0.5">
        <span class="text-base font-semibold text-base-content leading-snug">New update available</span>
        <span class="text-xs text-base-content/40 whitespace-nowrap shrink-0">2m ago</span>
      </div>
      <p class="text-sm text-base-content/60 leading-snug line-clamp-2 m-0">Version 3.2 is now available with new features and bug fixes.</p>
    </div>
    <span class="size-2 shrink-0 rounded-full mt-1.5" style="background: var(--color-primary);"></span>
  </div>

  <!-- Read -->
  <div class="flex gap-3 px-4 py-3 border-b border-base-300 cursor-pointer hover:bg-base-200">
    <div class="flex items-center justify-center size-10 shrink-0 rounded-full" style="background: color-mix(in oklch, var(--color-success) 10%, transparent); color: var(--color-success);">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
    </div>
    <div class="flex-1 min-w-0">
      <div class="flex items-start justify-between gap-2 mb-0.5">
        <span class="text-base font-medium text-base-content leading-snug">Payment received</span>
        <span class="text-xs text-base-content/40 whitespace-nowrap shrink-0">1h ago</span>
      </div>
      <p class="text-sm text-base-content/60 leading-snug line-clamp-2 m-0">Your payment of $120.00 has been processed successfully.</p>
    </div>
  </div>

  <!-- With actions -->
  <div class="flex gap-3 px-4 py-3 border-b border-base-300 cursor-pointer hover:bg-base-200" style="background: color-mix(in oklch, var(--color-primary) 5%, var(--color-base-100));">
    <div class="flex items-center justify-center size-10 shrink-0 rounded-full" style="background: color-mix(in oklch, var(--color-warning) 10%, transparent); color: var(--color-warning);">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>
    </div>
    <div class="flex-1 min-w-0">
      <div class="flex items-start justify-between gap-2 mb-0.5">
        <span class="text-base font-semibold text-base-content leading-snug">Action required</span>
        <span class="text-xs text-base-content/40 whitespace-nowrap shrink-0">3h ago</span>
      </div>
      <p class="text-sm text-base-content/60 leading-snug line-clamp-2 m-0">Please review and approve the pending request.</p>
      <div class="flex gap-2 mt-2">
        <button class="px-3 py-1 text-sm font-medium rounded-field cursor-pointer border" style="background: var(--color-primary); color: var(--color-primary-content, #fff); border-color: var(--color-primary);">Approve</button>
        <button class="px-3 py-1 text-sm font-medium bg-transparent rounded-field cursor-pointer" style="color: var(--color-primary); border: 1px solid var(--color-primary);">Dismiss</button>
      </div>
    </div>
    <span class="size-2 shrink-0 rounded-full mt-1.5" style="background: var(--color-primary);"></span>
  </div>
</div>

Requires: tw.min.css

// Mark as read:
item.classList.remove('notification-item-unread');
item.querySelector('.notification-item-dot')?.remove();

Notification Panel (Slide-in)

Preview

Notifications

New feature released 5m

Check out the new dashboard widgets.
Deploy successful 1h

Production deploy completed.

View all notifications

<!-- Note: panel is shown inline for demo; normally fixed + z-500 -->
<div style="position: relative; height: 400px; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem);">
  <div class="notification-panel notification-panel-open" style="position: absolute;">
    <div class="notification-panel-header">
      <span class="notification-panel-title">Notifications</span>
      <div class="notification-panel-actions">
        <button class="notification-panel-action" title="Mark all as read">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
        </button>
        <button class="notification-panel-action" title="Settings">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
        </button>
      </div>
    </div>

    <div class="notification-panel-filters">
      <button class="notification-panel-filter notification-panel-filter-active">All <span class="notification-panel-filter-count">5</span></button>
      <button class="notification-panel-filter">Unread <span class="notification-panel-filter-count">2</span></button>
      <button class="notification-panel-filter">Mentions</button>
    </div>

    <div class="notification-panel-content">
      <ul class="notification-panel-list">
        <li class="notification-item notification-item-unread">
          <div class="notification-item-icon notification-item-icon-info">
            <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>
          </div>
          <div class="notification-item-content">
            <div class="notification-item-header">
              <span class="notification-item-title">New feature released</span>
              <span class="notification-item-time">5m</span>
            </div>
            <p class="notification-item-message">Check out the new dashboard widgets.</p>
          </div>
          <span class="notification-item-dot"></span>
        </li>
        <li class="notification-item">
          <div class="notification-item-icon notification-item-icon-success">
            <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
          </div>
          <div class="notification-item-content">
            <div class="notification-item-header">
              <span class="notification-item-title">Deploy successful</span>
              <span class="notification-item-time">1h</span>
            </div>
            <p class="notification-item-message">Production deploy completed.</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="notification-panel-footer">
      <a class="notification-panel-footer-link">View all notifications</a>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Note: panel shown inline for demo; normally fixed + z-500 -->
<div style="position: relative; height: 400px; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 1rem;">
  <div class="absolute top-0 right-0 bottom-0 flex flex-col w-full max-w-[400px] bg-base-100 shadow-xl" style="box-shadow: -8px 0 32px rgba(0,0,0,0.12);">
    <!-- Header -->
    <div class="flex items-center justify-between px-4 py-3 border-b border-base-300 shrink-0">
      <span class="text-lg font-semibold text-base-content">Notifications</span>
      <div class="flex items-center gap-2">
        <button class="flex items-center justify-center size-9 bg-transparent border-none rounded-field text-base-content/60 cursor-pointer hover:bg-base-200 hover:text-base-content" title="Mark all as read">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
        </button>
        <button class="flex items-center justify-center size-9 bg-transparent border-none rounded-field text-base-content/60 cursor-pointer hover:bg-base-200 hover:text-base-content" title="Settings">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
        </button>
      </div>
    </div>

    <!-- Filters -->
    <div class="flex items-center gap-2 px-4 py-2 border-b border-base-300 overflow-x-auto shrink-0">
      <button class="inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-white border-none rounded-full cursor-pointer whitespace-nowrap" style="background: var(--color-primary);">All <span class="flex items-center justify-center font-semibold rounded-full" style="min-width: 18px; height: 18px; padding: 0 4px; font-size: 0.6875rem; background: rgba(255,255,255,0.2);">5</span></button>
      <button class="inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-base-content/60 bg-base-200 border-none rounded-full cursor-pointer whitespace-nowrap hover:bg-base-300">Unread <span class="flex items-center justify-center font-semibold rounded-full" style="min-width: 18px; height: 18px; padding: 0 4px; font-size: 0.6875rem; background: rgba(0,0,0,0.1);">2</span></button>
      <button class="inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-base-content/60 bg-base-200 border-none rounded-full cursor-pointer whitespace-nowrap hover:bg-base-300">Mentions</button>
    </div>

    <!-- Content -->
    <div class="flex-1 overflow-y-auto" style="overscroll-behavior: contain;">
      <ul class="list-none m-0 p-0">
        <li class="flex gap-3 px-4 py-3 border-b border-base-300 cursor-pointer hover:bg-base-200" style="background: color-mix(in oklch, var(--color-primary) 5%, var(--color-base-100));">
          <div class="flex items-center justify-center size-10 shrink-0 rounded-full" style="background: color-mix(in oklch, var(--color-info) 10%, transparent); color: var(--color-info);">
            <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>
          </div>
          <div class="flex-1 min-w-0">
            <div class="flex items-start justify-between gap-2 mb-0.5">
              <span class="text-base font-semibold text-base-content leading-snug">New feature released</span>
              <span class="text-xs text-base-content/40 whitespace-nowrap shrink-0">5m</span>
            </div>
            <p class="text-sm text-base-content/60 leading-snug line-clamp-2 m-0">Check out the new dashboard widgets.</p>
          </div>
          <span class="size-2 shrink-0 rounded-full mt-1.5" style="background: var(--color-primary);"></span>
        </li>
        <li class="flex gap-3 px-4 py-3 border-b border-base-300 cursor-pointer hover:bg-base-200">
          <div class="flex items-center justify-center size-10 shrink-0 rounded-full" style="background: color-mix(in oklch, var(--color-success) 10%, transparent); color: var(--color-success);">
            <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
          </div>
          <div class="flex-1 min-w-0">
            <div class="flex items-start justify-between gap-2 mb-0.5">
              <span class="text-base font-medium text-base-content leading-snug">Deploy successful</span>
              <span class="text-xs text-base-content/40 whitespace-nowrap shrink-0">1h</span>
            </div>
            <p class="text-sm text-base-content/60 leading-snug line-clamp-2 m-0">Production deploy completed.</p>
          </div>
        </li>
      </ul>
    </div>

    <!-- Footer -->
    <div class="flex items-center justify-center px-4 py-3 border-t border-base-300 shrink-0">
      <a class="text-sm font-medium no-underline cursor-pointer hover:underline" style="color: var(--color-primary);">View all notifications</a>
    </div>
  </div>
</div>

Requires: tw.min.css

// Open/close panel:
const panel = document.querySelector('.notification-panel');
panel.classList.toggle('notification-panel-open');

// With backdrop:
const backdrop = document.querySelector('.notification-panel-backdrop');
backdrop.classList.toggle('notification-panel-backdrop-open');

Empty State

Preview

Notifications

All caught up!

No new notifications.

<div style="max-width: 400px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem); overflow: hidden;">
  <div class="notification-panel-header">
    <span class="notification-panel-title">Notifications</span>
  </div>
  <div class="notification-panel-empty">
    <svg xmlns="http://www.w3.org/2000/svg" class="notification-panel-empty-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
    <h3 class="notification-panel-empty-title">All caught up!</h3>
    <p class="notification-panel-empty-description">No new notifications.</p>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center justify-center p-12 text-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-16 mb-4 text-base-content/40 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
  <h3 class="text-lg font-medium text-base-content/60 mb-1">All caught up!</h3>
  <p class="text-base text-base-content/40">No new notifications.</p>
</div>

Requires: tw.min.css

// No JavaScript required — show/hide based on notification count

Glass Panel

Preview

Notifications

Glass notification now

Glass morphism on notification panel.

<div class="p-6 rounded-box" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info)); min-height: 150px; position: relative; overflow: hidden;">
  <div style="max-width: 380px; border-radius: var(--radius-box, 1rem); overflow: hidden;">
    <div class="notification-panel glass" style="position: relative; transform: none; opacity: 1; visibility: visible;">
      <div class="notification-panel-header">
        <span class="notification-panel-title" style="color: white;">Notifications</span>
      </div>
      <div class="notification-panel-content" style="max-height: 150px;">
        <ul class="notification-panel-list">
          <li class="notification-item">
            <div class="notification-item-icon" style="background: rgba(255,255,255,0.15); color: white;">
              <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z"/></svg>
            </div>
            <div class="notification-item-content">
              <div class="notification-item-header">
                <span class="notification-item-title">Glass notification</span>
                <span class="notification-item-time">now</span>
              </div>
              <p class="notification-item-message">Glass morphism on notification panel.</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="p-6 rounded-box" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info)); min-height: 150px; position: relative; overflow: hidden;">
  <div style="max-width: 380px; border-radius: 1rem; overflow: hidden;">
    <div class="relative flex flex-col glass" style="border-left: 1px solid var(--glass-border, rgba(255,255,255,0.18));">
      <div class="flex items-center justify-between px-4 py-3 shrink-0" style="border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.18));">
        <span class="text-lg font-semibold" style="color: white;">Notifications</span>
      </div>
      <div class="flex-1 overflow-y-auto" style="max-height: 150px; overscroll-behavior: contain;">
        <ul class="list-none m-0 p-0">
          <li class="flex gap-3 px-4 py-3 cursor-pointer" style="border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.18));">
            <div class="flex items-center justify-center size-10 shrink-0 rounded-full" style="background: rgba(255,255,255,0.15); color: white;">
              <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z"/></svg>
            </div>
            <div class="flex-1 min-w-0">
              <div class="flex items-start justify-between gap-2 mb-0.5">
                <span class="text-base font-medium leading-snug" style="color: white;">Glass notification</span>
                <span class="text-xs whitespace-nowrap shrink-0" style="color: rgba(255,255,255,0.5);">now</span>
              </div>
              <p class="text-sm leading-snug m-0" style="color: rgba(255,255,255,0.7);">Glass morphism on notification panel.</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — uses .glass class modifier