A semantic list component whose items fade and slide in with a stagger, animate out cleanly on removal, and reorder smoothly via layout animation — for building live feeds, task lists, or activity logs.
"use client";
import * as React from "react";
import { AnimatedList, AnimatedListItem } from "@/components/ui/animated-list";
export default function AnimatedListDemo() {
const [items, setItems] = React.useState([
{ id: 1, text: "Order #1042 shipped" },
{ id: 2, text: "New comment on your post" },
{ id: 3, text: "Server backup completed" },
]);
const nextId = React.useRef(4);
const addItem = () => {
setItems((prev) => [
...prev,
{ id: nextId.current++, text: `New notification #${nextId.current}` },
]);
};
const removeItem = (id: number) => {
setItems((prev) => prev.filter((item) => item.id !== id));
};
return (
<div className="flex w-full max-w-sm flex-col gap-4">
<button
onClick={addItem}
className="self-start rounded-md border border-[var(--color-border,#e4e7ec)] px-3 py-1.5 text-sm font-medium text-[var(--color-fg,#111318)] transition-colors hover:bg-[var(--color-surface,#fff)]"
>
Add item
</button>
<AnimatedList>
{items.map((item, index) => (
<AnimatedListItem
key={item.id}
index={index}
onClick={() => removeItem(item.id)}
className="cursor-pointer"
>
{item.text}
</AnimatedListItem>
))}
</AnimatedList>
</div>
);
}
Part of Motiq — browse the full library on 21st.dev.