Notification center

Keeps persistent notifications with read, unread, action, and dismissal state.

Preview

Notifications preview (1 unread)

Export ready

In action

Notifications (1 unread)

Export ready
Your study is ready to download
Studio invitation

When to use

Use it for

An inbox of persistent application notifications.

Not for

Ephemeral confirmation; use Toast.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { NotificationCenter } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/notification-center.

2. Vendor the source

npx @noorddev/vlak-cli add notification-center

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/notification-center.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { NotificationCenter } from "@noorddev/vlak-react";

<NotificationCenter defaultValue={[{ id: "export", title: "Export ready", description: "Your study is ready to download" }, { id: "invite", title: "Studio invitation", read: true }]} />

Props

NotificationCenter

Persistent notifications with controlled read/unread and dismissal state.

Prop	Type	Default
`value`	`NotificationItem[]`
`defaultValue`	`NotificationItem[]`	`[]`
`onValueChange`	`(items: NotificationItem[]) => void`
`label`	`string`	`"Notifications"`
`emptyLabel`	`string`	`"You're up to date"`

Also accepts Omit<HTMLAttributes<HTMLElement>, "defaultValue">.

Keyboard

Keys	Does
`Tab, Enter, Space`	Tab reaches read, action, and dismiss buttons; Enter or Space activates.

Accessibility

Unread state is also exposed in text and control names. User changes are announced through a polite status.

Markup

<section class="rs-notification-center" aria-label="Notifications"><ul class="rs-notification-center-list"><li class="rs-notification-center-item rs-notification-center-unread"><h3 class="rs-notification-center-title">Export ready</h3><p class="rs-notification-center-detail">Unread</p></li></ul></section>

Classes

.rs-notification-center.rs-notification-center-header.rs-notification-center-title.rs-notification-center-list.rs-notification-center-item.rs-notification-center-unread.rs-notification-center-detail.rs-notification-center-actions

Depends on

/button