From Magic UI
Animated List
A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
MITCommunity tier
đź’¸
Magic UI
Demo from Magic UI, shown with the Fabrials theme.
Installation
Add it by name, once the app knows the Fabrials registry.
npx shadcn@latest add @fabrials/magicui-animated-listOr by address:
https://ui.fabrials.com/r/magicui-animated-list.jsonshadcn copies the source into your app and installs what it needs.
- animated-list.tsxnew
- motion MIT
Origin and license
ui.fabrials.com republishes this component unchanged, with Magic UI's license at the top of every file. The copy was taken on 2026-09-27 and passed the license gate.
magicuidesign/magicuiMagic UI 23K 1.2K- Library
- Magic UI
- License
- MIT, Copyright (c) Magic UI
- Upstream entry
- https://magicui.design/r/animated-list.json
- Source at
- magicuidesign/magicui@d7207e5
- Snapshot
sha256 a95ae266e0eda12b…
Design notes
Where this component departs from the Fabrials design principles. It still works; decide whether it fits your product.
- Reduced motionAnimates without checking reduced motion; people who ask the system for less motion still get it.
from "motion/react"