Animated List

Renders a list where items appear one after another with a delay. Each item is animated in sequence. Use it to display notifications or events on a landing page.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/animated-list

npx layro-cli add @magicuidesign/animated-list

npx layro-cli add @magicuidesign/animated-list

bunx layro-cli add @magicuidesign/animated-list

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import React, {
  useEffect,
  useMemo,
  useState,
  type ComponentPropsWithoutRef,
} from "react"
import { AnimatePresence, motion, type MotionProps } from "motion/react"

import { cn } from "@/lib/utils"

export function AnimatedListItem({ children }: { children: React.ReactNode }) {
  const animations: MotionProps = {