AnimatedList

Renders a list that animates items in, out, and on reorder as the array changes.

AnimatedList renders an array of items and animates each entry as the array changes — fading and sliding items in on add, out on remove, and smoothly relayouting on reorder. Provide getKey for a stable identity per item, renderItem to draw each one, and tune the cascade with stagger. It honors reduced motion (relying on the app-level MotionConfig reducedMotion="user"). Great for notifications, activity feeds, and live search results.

Example

Preview

Deploy finished
Invoice paid
New signup

import { AnimatedList } from '@officina/ui';

<AnimatedList
  items={notifications}
  getKey={(n) => n.id}
  renderItem={(n) => <NotificationCard {...n} />}
/>;

API

Prop	Type	Default	Description
getKey*	(item: T, index: number) => string \| number	—	Returns a stable key per item so motion can track add/remove/reorder.
items*	T[]	—	Items to render; add/remove drives enter/exit animations.
renderItem*	(item: T, index: number) => ReactNode	—	Renders a single item.
itemClassName	string	—	Extra classes applied to each item wrapper.
stagger	number	0.04	Per-item enter delay for a cascading reveal.

Example

API

On this page