Notification Centre

Beta

Get Ritla UI

The panel a bell opens: tabs and notifications grouped by day, with unread ones marked.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add notification-centre
Also works with shadcn: npx shadcn@latest add @ritla/notification-centre
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

notification-centre.tsx

import { NotificationCentre } from "@/components/ui/notification-centre";<NotificationCentre title="Notifications" tabsLabel="Notification types" tabs={tabs} empty={{ title: "You're all caught up", description: "New activity will show here." }} />

API reference

NotificationCentre

Prop	Type	Default	Description
`tabs`	`NotificationTab[]`	None	Each tab: `value`, `label` and groups of notifications.
`onMarkAllRead / markAllReadLabel`	`() => void / string`	None	Mark all as read, disabled when nothing is unread.
`settings`	`{ label, href }`	None	The settings link at the foot.
`empty`	`{ title, description }`	None	The empty state.
`tabsLabel / unreadLabel`	`string`	None	The tab list's name, and the word for unread.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowRightArrowLeft`	Moves between tabs; flips in Arabic.
`Tab`	Moves into the notifications (links).

ARIA

Unread reads as unread after the title, never by colour alone.
Put it in a Popover opened by the bell button.

Arabic and RTL notes

Mirrors

The icon starts the row and the unread dot ends it; tabs start from the right.

Does not mirror

The checks don't mirror.

Numerals: Amounts and times as the app passes them.
Arabic typography: Title label-14 Semibold, detail body-12.