Theme

NotificationCenter

overlay @dryui/ui Compound

Notification panel with trigger, groups, and items

notificationbellalertsinboxpopoverunread

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { NotificationCenter } from '@dryui/ui';
</script>

<NotificationCenter.Root bind:items={notifications} bind:open={panelOpen}>
  <NotificationCenter.Trigger>
    {#snippet children({ unreadCount })}
      <Button>Notifications ({unreadCount})</Button>
    {/snippet}
  </NotificationCenter.Trigger>
  <NotificationCenter.Panel>
    <NotificationCenter.Group label="Today">
      <NotificationCenter.Item id="1" variant="info">New deployment complete</NotificationCenter.Item>
    </NotificationCenter.Group>
  </NotificationCenter.Panel>
</NotificationCenter.Root>

Import options

Root package

ts
import { NotificationCenter } from '@dryui/ui'

Per-component subpath

ts
import { NotificationCenter } from '@dryui/ui/notification-center'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Basic notification center

Your report has been generated successfully.
Storage usage is approaching 90% capacity.
Payment processing failed for invoice #4821.
svelte
<NotificationCenter.Root>
  <NotificationCenter.Trigger>
    {#snippet children({ unreadCount })}
      Notifications {unreadCount > 0 ? `(${unreadCount})` : ''}
    {/snippet}
  </NotificationCenter.Trigger>
  <NotificationCenter.Panel>
    <NotificationCenter.Item id="1" variant="info">
      Your report has been generated successfully.
    </NotificationCenter.Item>
    <NotificationCenter.Item id="2" variant="warning">
      Storage usage is approaching 90% capacity.
    </NotificationCenter.Item>
    <NotificationCenter.Item id="3" variant="critical">
      Payment processing failed for invoice #4821.
    </NotificationCenter.Item>
  </NotificationCenter.Panel>
</NotificationCenter.Root>

Grouped notifications

Today
New team member Sarah joined the project.
Build #392 completed in 2m 14s.
Yesterday
API rate limit reached 80% of quota.
Database migration failed on staging.
svelte
<NotificationCenter.Root>
  <NotificationCenter.Trigger>
    {#snippet children({ unreadCount })}
      Alerts {unreadCount > 0 ? `(${unreadCount})` : ''}
    {/snippet}
  </NotificationCenter.Trigger>
  <NotificationCenter.Panel placement="bottom-end">
    <NotificationCenter.Group label="Today">
      <NotificationCenter.Item id="t1" variant="info">
        New team member Sarah joined the project.
      </NotificationCenter.Item>
      <NotificationCenter.Item id="t2" variant="info" read>
        Build #392 completed in 2m 14s.
      </NotificationCenter.Item>
    </NotificationCenter.Group>
    <NotificationCenter.Group label="Yesterday">
      <NotificationCenter.Item id="y1" variant="warning" read>
        API rate limit reached 80% of quota.
      </NotificationCenter.Item>
      <NotificationCenter.Item id="y2" variant="critical" read>
        Database migration failed on staging.
      </NotificationCenter.Item>
    </NotificationCenter.Group>
  </NotificationCenter.Panel>
</NotificationCenter.Root>

Structure

Compound components always start with NotificationCenter.Root. Use this structure block to understand required wrappers before you wire state or styling.

NotificationCenter.Root
  NotificationCenter.Trigger
  NotificationCenter.Panel
    NotificationCenter.Group
      NotificationCenter.Item
NotificationCenter.Root NotificationCenter.TriggerNotificationCenter.PanelNotificationCenter.ItemNotificationCenter.Group

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with NotificationCenter.Root, then add only the parts you need.

NotificationCenter.TriggerNotificationCenter.PanelNotificationCenter.ItemNotificationCenter.Group

NotificationCenter.Root

Prop Type Default Required Bindable
items
import('@dryui/primitives').NotificationItem[]
[] — ✓
open
boolean
false — ✓
children
Snippet
— ✓ —

Also accepts standard HTML attributes (class, style, id, etc.)

NotificationCenter.Trigger

Prop Type Default Required Bindable
children
Snippet<[{ unreadCount: number }]>
— ✓ —

Forwards <button> attributes via rest props. Common examples: type, disabled, name. Omitted: children.

NotificationCenter.Panel

Prop Type Default Required Bindable
offset
number
— — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

NotificationCenter.Item

Prop Type Default Required Bindable
id
string
— ✓ —
read
boolean
— — —
timestamp
Date
— — —
variant
infowarningcritical
 — — —
action
Snippet
— — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

NotificationCenter.Group

Prop Type Default Required Bindable
label
string
— ✓ —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.