NotificationCenter

A notification-center frame composed from header, scroller, list, item, and action parts.

Preview#

Anatomy#

NotificationCenterPopup is the surface. NotificationCenterHeader, NotificationCenterScroller, NotificationCenterList, and NotificationCenterItem are content slots and should live inside the popup unless you intentionally provide your own shell.

import {
  NotificationCenter,
  NotificationCenterActionButton,
  NotificationCenterCount,
  NotificationCenterHeader,
  NotificationCenterItem,
  NotificationCenterItemActions,
  NotificationCenterItemBody,
  NotificationCenterItemContent,
  NotificationCenterItemIcon,
  NotificationCenterItemRow,
  NotificationCenterItemTitle,
  NotificationCenterList,
  NotificationCenterPopup,
  NotificationCenterScroller,
  NotificationCenterTitle,
  NotificationCenterTrigger,
} from "raft-ui";

<NotificationCenter>
  <NotificationCenterTrigger />
  <NotificationCenterPopup>
    <NotificationCenterHeader>
      <NotificationCenterTitle />
      <NotificationCenterCount />
    </NotificationCenterHeader>
    <NotificationCenterScroller>
      <NotificationCenterList>
        <NotificationCenterItem>
          <NotificationCenterItemRow>
            <NotificationCenterItemIcon />
            <NotificationCenterItemContent>
              <NotificationCenterItemTitle />
              <NotificationCenterItemBody />
              <NotificationCenterItemActions>
                <NotificationCenterActionButton />
              </NotificationCenterItemActions>
            </NotificationCenterItemContent>
          </NotificationCenterItemRow>
        </NotificationCenterItem>
      </NotificationCenterList>
    </NotificationCenterScroller>
  </NotificationCenterPopup>
</NotificationCenter>

Usage#

Empty state#WIP

API#WIP

NotificationCenter#

open
boolean
Controlled open state owned by Base UI Popover.Root.
defaultOpendefault: false
boolean
Initial open state for uncontrolled usage.
modaldefault: false
boolean | "trap-focus"
Defaults to non-modal to match the source rail/navbar floating popup.
onOpenChange
Popover.Root.Props['onOpenChange']
Called when trigger, Escape, or outside press changes open state.
...props
Base UI Popover.Root.Props
Root popover props. Compose trigger, popup, and notification parts as children.

NotificationCenterTrigger#

...props
Base UI Popover.Trigger.Props
Trigger affordance and positioning anchor. Use render to compose a custom icon button; defaults to the themed bell/attention control.

NotificationCenterPopup#

viewportdefault: "desktop"
"desktop" | "mobile"
desktop = fixed width; mobile = viewport-capped width.
sizedefault: "md"
"sm" | "md" | "lg"
Frame height token. Desktop uses fixed heights; mobile uses max-height tokens.
sidedefault: "bottom"
"top" | "bottom" | "left" | "right" | "inline-start" | "inline-end"
Anchored placement relative to the trigger, forwarded to Base UI Popover.Positioner.
aligndefault: "center"
"start" | "center" | "end"
Alignment along the anchored side, forwarded to Base UI Popover.Positioner.
positionMethoddefault: "fixed"
"fixed" | "absolute"
Positioning strategy for the popup. The popup bundles Portal, Positioner, and Popup internally.
sideOffsetdefault: 4
number
Gap between the trigger and the popup edge.
collisionAvoidance
CollisionAvoidance
How the popup avoids viewport edges when space runs out.
portalProps
Base UI Popover.Portal.Props
Optional portal options (e.g. container) forwarded to the internal portal.
...props
Base UI Popover.Popup.Props
The visual card. Popup owns the border, shadow, background, portal, and positioner.

NotificationCenterHeader#

...props
useRender.ComponentProps<"div">
Header row for title and count.

NotificationCenterTitle#

...props
useRender.ComponentProps<"span">
Panel title text.

NotificationCenterCount#

...props
useRender.ComponentProps<"span">
Trailing count or clear-all label in the header.

NotificationCenterScroller#

...props
useRender.ComponentProps<"div">
Scroll boundary for the list or empty state.

NotificationCenterList#

...props
useRender.ComponentProps<"ul">
Notification list. Defaults to aria-label='Notifications'.

NotificationCenterItem#

readdefault: false
boolean
Applies the source read opacity treatment.
...props
useRender.ComponentProps<"li">
List item root. Compose row, icon, and content parts as children.

NotificationCenterItemRow#

...props
useRender.ComponentProps<"div">
Horizontal layout for icon and content.

NotificationCenterItemIcon#

statusdefault: "info"
"error" | "warning" | "info" | "success"
Applies the notification status color and default icon when children are omitted.
...props
useRender.ComponentProps<"div">
Status icon slot. Pass children to replace the default glyph.

NotificationCenterItemContent#

...props
useRender.ComponentProps<"div">
Flexible column for title, body, and actions.

NotificationCenterItemTitle#

...props
useRender.ComponentProps<"div">
Notification title text.

NotificationCenterItemBody#

...props
useRender.ComponentProps<"div">
Supporting body copy under the title.

NotificationCenterItemActions#

...props
useRender.ComponentProps<"div">
Trailing action row for NotificationCenterActionButton children.

NotificationCenterActionButton#

...props
ButtonProps
Button attributes. Always an outline md (32px) button, never pink: a list can hold several rows waiting on you at once. Size and variant are fixed; className merges with the action recipe.

NotificationCenterEmptyState#

...props
EmptyStateProps
Semantic empty-state root. Compose EmptyStateContent with EmptyStateIcon, EmptyStateTitle, and EmptyStateDescription.