Animated List

Cards

About

Animated List UI

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated List to your project and fits it to your theme.

Code

How Animated List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { AnimatedList } from "@/components/ui/animated-list"
import { useState, useEffect } from "react"

const NOTIFICATIONS = [
  "Alice just joined",
  "New message from Bob", 
  "Your upload is complete",
  "Carol started following you",
  "Deploy succeeded",
]

export default function AnimatedListDemo() {
  const [items, setItems] = useState<string[]>([])

  useEffect(() => {
    let i = 0
    const id = setInterval(() => {
      if (i >= NOTIFICATIONS.length) { clearInterval(id); return }
      setItems(prev => [NOTIFICATIONS[i], ...prev].slice(0, 4))
      i++
    }, 800)
    return () => clearInterval(id)
  }, [])

  return (
    <div className="flex items-center justify-center min-h-screen bg-background p-8">
      <div className="w-full max-w-sm space-y-0">
        <AnimatedList
          items={items}
          renderItem={(item) => (
            <div className="px-4 py-3 mb-2 rounded-lg border border-border bg-card text-card-foreground text-sm">
              {item}
            </div>
          )}
        />
      </div>
    </div>
  )
}