前言

每天打開電腦、手機，第一眼迎接你的往往不是可愛的貓咪桌布，而是一堆通知叮叮咚咚的跳出來：訊息、提醒、優惠通知、甚至還有「你已經三天沒運動了」的健康警告。通知無處不在，但如果能用一個好看又好整理的方式呈現，這些「小小打擾」或許就能變成「貼心提醒」🤗

今天要介紹的 Animate UI Community – Notification List，正是把通知整理得有條有理、還帶點動畫趣味的元件，讓你的使用者面對通知時，不再只是點掉，而是忍不住多看一眼。 🎉

Notification List

1. 使用 Shadcn CLI 加入 Notification List

   npx shadcn@latest add @animate-ui/components-community-notification-list
   

2. Import 元件並將元件放在想要的位置上

   import { NotificationList } from '@/components/animate-ui/components/community/notification-list';
   

   <NotificationList />
   

3. 可以選擇要放在 Navigation Bar (如一開始 GIF Demo) 或者從側邊皆可～

小結

今天我們一起逛了 Animate UI 的 Notification List，簡直就像網頁世界裡的「小郵差」📬，專門幫你把各種通知排排站好，還順便幫它們換上帥氣的動畫衣服。

雖然只是通知，但有了這個元件，整個介面看起來就更有質感、不會再像滿桌便條紙一樣亂糟糟。下次想讓通知變得有禮貌、又帶點小驚喜時，不妨試試 Notification List 吧！✨

Reference

• Animate UI Notification List