A notifications component for displaying system or user alerts.
Loading demo: notifications-real-world
npx sdaia-ui@latest add notifications
import { Notifications } from "@/components/ui/notifications"<Notifications />Use surface="glass" to enable Glass Effect.
Loading demo: notifications-glass
Default notifications display.
Loading demo: notifications-default
Props for the Notifications component.
Prop | Type | Default | Required |
|---|---|---|---|
title | string | 'Notifications' | optional |
tabs | HorizontalTabItem[] | - | optional |
activeTab | string | - | optional |
onTabChange | (value: string) => void | - | optional |
onMarkAllRead | () => void | - | optional |
onClose | () => void | - | optional |
groups | NotificationGroup[] | [] | optional |
groupsByTab | Record<string, NotificationGroup[]> | - | optional |
rtl | boolean | false | optional |