Default
Notifications
All
Unread (2)
NotificationCentre
Recent notifications in All and Unread tabs, announced politely, with a switch that pauses them.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Tabs + list + live region
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Empty
Notifications
All
Unread
Nothing new.
Show the codeHide the code
Empty, code
<NotificationCentre notifications={[]} />Tokens
The 14 design tokens NotificationCentre reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 14 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.action.primary | … | --sd-color-action-primary |
| color.bg.canvas | … | --sd-color-bg-canvas |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.default | … | --sd-color-border-default |
| color.border.subtle | … | --sd-color-border-subtle |
| color.text.default | … | --sd-color-text-default |
| color.text.secondary | … | --sd-color-text-secondary |
| radius.full | … | --sd-radius-full |
| shape.radius-surface | … | --sd-shape-radius-surface |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.inset.lg | … | --sd-spacing-inset-lg |
| spacing.inset.md | … | --sd-spacing-inset-md |
| spacing.inset.sm | … | --sd-spacing-inset-sm |
| target.min | … | --sd-target-min |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/notification-centreThen import it
import { NotificationCentre } from "@/components/ui/notification-centre"Props
| Prop | Type | What it does |
|---|---|---|
notificationsrequired | NotificationItem[] | |
title | stringDefault 'Notifications' | Heading of the panel. Default "Notifications". |
isPaused | boolean | Hold new notifications: nothing new is announced or shown until it is turned off (2.2.4). |
onPausedChange | (paused: boolean) => void | |
onMarkAllRead | () => void | |
headingLevel | 2 | 3 | 4Default 2 | Heading level of the title (2.4.10). Default 2. |
emptyText | stringDefault 'Nothing new.' | Shown when a tab has nothing. |
className | string |
When to use it
Use it for
- An in-app notifications panel or page
Use something else for
- A one-off message about an action: use Toast
- A page-level warning: use Alert
Accessibility
Screen readers announce "New notification: Invoice ready" (polite); "Pause notifications, switch, off".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Keep each notification short and say what happened
Shared patterns it ships with: 2.2.4 (Pause notifications holds new ones).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 425 text runs: 0 below 7:1, lowest 11.42:1 |
| Target size | 82 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 126 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 6 of 6, Firefox 6 of 6, WebKit 6 of 6 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the demo button |
| Tab | Tab reaches Mark all as read |
| Tab | Tab reaches the Pause switch |
| Space | Space pauses notifications |
| Tab | Tab enters the tabs |
| ArrowRight | Right shows Unread |
In Figma
The Figma component is NotificationCentre, with Tab (All, Unread); State (Default, Empty). The Figma library isn’t published yet.
Figma to code: Tab (All, Unread; preview only); Paused → isPaused; Title → title; Show mark all read → onMarkAllRead; State (Default, Empty = notifications=[]); nested Item → notifications.