sheengemologic ui
All components

NotificationCenter

A compact app-owned notification trigger and contextual list with non-color unread state.@gemologic/sheen-patterns · application

Playground

<ThemeProvider><NotificationCenter notifications={{ items: [{ kind: "link", id: "deploy", title: "Deploy finished", href: "/deploys/1" }] }}  target="topbar-end"/></ThemeProvider>

Variant matrix

App notifications
target: topbar-end
target: sidebar-footer

Anatomy

Package
@gemologic/sheen-patterns
Source
packages/patterns/src/NotificationCenter.tsx
Tokens
  • --sheen-color-accent
  • --sheen-color-bg-raised
  • --sheen-color-fg-muted

Accessibility

Role: button, dialog, listKeyboard: Tab, Shift+Tab, Enter, Space, Escape

Do

  • Format dates and authorization-filter items in the app.

Do not

  • Do not fetch, poll, or infer read state in Sheen.

Generated props

NameTypeDefaultDescription
notifications *AdminNotificationModel—Ordered app-owned notifications plus optional mark-all action. Time copy is preformatted by the app.
target"topbar-end" | "sidebar-footer"topbar-endTopbar dropdown or sidebar-footer dropup placement.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.