Animated List

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

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/animated-list.json"

Install Manually

Copy and paste the following code in the same folder

AnimatedList.vue
Notification.vue

API

Prop NameTypeDefaultDescription
delaynumber1The delay in milliseconds before adding each item to the list.

Features

  • 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.

Credits