Sitewright

Notification center

An inbox card with All, Mentions and System tabs and counts, grouped notifications with avatars or status icons, unread dots, action buttons that mark an item read, Mark all read, and an empty state.

What it is for

A bell popover, an inbox page or a settings panel (max width 430px, or pass a class to widen).

Use it

1 · site.json
"effects": { "components": ["notification-center"] }
or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --components notification-center
2 · import it
import { NotificationCenter } from '@/components/fx/ui';

Files

  • components/fx/ui/NotificationCenter.tsx
  • components/fx/ui/SegmentedControl.tsx
  • components/fx/ui/_bui.tsx
  • components/fx/ui/LICENSE-boardui.txt
  • ui-bui-base.css styles
  • ui-segmented-control.css styles
  • ui-notification-center.css styles

Source

Adapted from BoardUI (MIT). Restyled in plain CSS and rewritten without its libraries; the upstream licence and notice are kept (see THIRD_PARTY_NOTICES.md).

Credits and licences: third-party notices.

Accessibility

  • Keyboard. Components in the kit are written to be reached and used with the keyboard. Try it: press Tab inside the preview.
  • Reduced motion. With prefers-reduced-motion on, animation settles to its finished state at once.
  • Touch. Pointer-follow effects are skipped on touch screens; controls stay finger-sized.