# Notification Dynamic Island — React Notification Component

> A pill that springs between sizes to hold live activities (an incoming call, a timer, now playing) with content that blurs across each morph.

- Category: [Notifications](https://pixelpapa.com/components/notifications.md)
- Tags: notification, island, morph, spring, live-activity
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/notifications/notification-dynamic-island

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/notification-dynamic-island
```

The file is written to `components/pixelpapa/notification-dynamic-island.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/notifications/notification-dynamic-island.

## AI prompt

```text
Add the "Notification Dynamic Island" component from PixelPapa UI to this project.

What it is: A pill that springs between sizes to hold live activities (an incoming call, a timer, now playing) with content that blurs across each morph.
Category: Notifications. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/notification-dynamic-island
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/notification-dynamic-island.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/notification-dynamic-island.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/notification-dynamic-island" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More notifications

- [Alert Inline Variants](https://pixelpapa.com/components/notifications/alert-inline-variants.md): Inline alerts in info, success, warning and error tones with an optional action; dismissing one blurs it out and the stack closes the gap on a spring.
- [Notification Inbox Popover](https://pixelpapa.com/components/notifications/notification-inbox-popover.md) (Pro): A bell popover with Unread and All tabs: marking a row read drains its dot and folds it out of the unread list while the badge count rolls down.
- [Notification List Swipe](https://pixelpapa.com/components/notifications/notification-list-swipe.md): Notification rows you can swipe: right to archive, left to delete. The action underneath grows with the drag, and a flick or a long pull sends the row flying before the list closes up.
- [Toast Stack Sonner Like](https://pixelpapa.com/components/notifications/toast-stack-sonner-like.md) (Pro): A hand-built toaster: toasts pile into a tight stack, fan out into a readable list on hover, pause their timers while you look, and promise toasts morph from loading to done.
- [Toast Undo Progress](https://pixelpapa.com/components/notifications/toast-undo-progress.md): An undo toast with a draining countdown bar that pauses on hover; undo springs the removed row back into the list, and letting it run out commits the action.