Animated List

A sequentially animated list that introduces each item with a timed delay, perfect for displaying notifications or events on your landing page.

通过 CLI 安装

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/animated-list.json"

在同一个文件中，复制并粘贴以下代码：

AnimatedList.vue

Notification.vue

Prop 名称	类型	默认值	描述
`delay`	`number`	`1`	The delay in milliseconds before adding each item to the list.

Animated Item Loading: Items are added to the list one by one with a configurable delay.
Smooth Transitions: Each item animates in with a spring effect on entry and a smooth scale and opacity animation on exit.
Reverse Order: Items are displayed in reverse order (newest at the top) for a dynamic, engaging user experience.
Flexibility: You can pass different components as items, making it highly versatile.

本页