PlumUI

Animated List

A list where new items drop in with a spring and the others glide to make room.

Motion
  • PR #284 merged
    feat: dock component
    now
  • Léa commented
    “Ship it, looks great.”
    now

Playground

Tweak the props, the preview and the code follow.

  • New sign-up
Props
4
1800
import { AnimatedList, AnimatedListItem } from "@/components/ui/animated-list"

<AnimatedList>
  {items.map((item) => (
    <AnimatedListItem key={item.id}>{item.label}</AnimatedListItem>
  ))}
</AnimatedList>

Installation

npx @plumsydev/plum-ui add animated-list

Usage

import { AnimatedList, AnimatedListItem } from "@/components/ui/animated-list"
<AnimatedList>
  {items.map((item) => (
    <AnimatedListItem key={item.id}>{item.title}</AnimatedListItem>
  ))}
</AnimatedList>

Examples

Add & remove

Items animate in on add and collapse out on remove.

  • Review dock PR
  • Write changelog
  • Record demo video

Chat

Override initial so messages rise from the bottom.

  • Did the deploy go out?

API Reference

AnimatedList

Extends ul. Wraps its children in AnimatePresence.

AnimatedListItem

Extends motion.li, so initial, animate, exit and transition can be overridden.

Notes

  • Give every item a stable key — that's how enter and exit are detected.
  • With reduced motion, items fade without moving.
PreviousAlert DialogNextAnimated Number