Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Command Palette

Search for a command to run...

Docs
Animated List

Animated List

A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

💸
Payment received·15m ago

Magic UI

Installation

Usage

import { AnimatedList } from "@/components/magicui/animated-list";
<AnimatedList>
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</AnimatedList>

Props

Animated List

PropTypeDefaultDescription
classNamestring-The class name for the component
delaynumber1000The delay between each item in ms