Notification center

A home for updates with read state, grouped information, and animated disclosure.

npx shadcn@latest add @silicon-ui/notification-center
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/notification-center

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-popover lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/notification-center/notification-center.tsx
    • components/silicon-ui/notification-center/notification-center.module.css
    • components/silicon-ui/avatar/avatar.tsx shared
    • components/silicon-ui/avatar/avatar.module.css shared
    • components/silicon-ui/lib/silicon-provider.tsx shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { NotificationCenter } from "@/components/silicon-ui/notification-center/notification-center";

API reference

PropTypeDefault
notifications*NotificationItem[]—
labelstring"Notifications"
onReadChange(notification: NotificationItem, read: boolean) => void—
onDismiss(notification: NotificationItem) => void—
openboolean—
onOpenChange(open: boolean) => void—
avoidCollisionsbooleantrue

Dependencies

npm
@radix-ui/react-popoverlucide-reactmotion
Registry
silicon-motion-tokensavatar