OOratiq

Notifications

Ready

Inbox-style notification list.

  • CB

    Chris invited you to Ultimate Workout (unread)

    2m

    Join as a coach to edit sessions and track members.

  • SW

    Sam commented on Week 3 (unread)

    1h

    “Deload volume looks right now.”

  • OQ

    Your export is ready

    Yesterday

Installation

$ npx @oratiq-js/ui add notifications

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { NotificationList, NotificationItem } from "@/components/ui/notifications";

Behaviour

  • Unread state is bold text + a dot on the reading edge + a visually hidden '(unread)' — never colour alone.
  • Titles and descriptions carry dir=auto for mixed-language inboxes.
  • The actions slot holds real buttons (accept/decline) — the whole row being clickable is optional via onSelect.
Presentation only, by design: pair it with Popover or Sheet for the panel, and your own data layer for read-state.

View source on GitHub → components/ui/notifications.tsx