Skip to content
Cuelark UI
EffectsAnimated

Animated List

A live feed where items arrive and push the rest down.

Animated List turns a list into a live feed: new items spring in at the top while the others glide down to make room. Use it for notifications, activity streams and transactions on landing pages and dashboards.

Preview

  • Payment received$240 from Atlas Labs
    now
  • New memberGrace joined Borealis
    1m
  • Pull request mergedfeat: motion tokens
    3m
  • New comment“Ship it.” on Roadmap
    6m

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/animated-list.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/animated-list.

Builds on: motion

Usage

import { AnimatedList } from "@/components/ui/animated-list";

<AnimatedList>{notifications}</AnimatedList>

Motion

How it moves

New items spring in; existing items animate from their previous positions (FLIP).

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

AnimatedList

PropTypeDefaultDescription
intervalnumber1400ms between items.
loopbooleantrueCycle forever.
maxnumber5Visible items.

Accessibility

  • A polite live region; consider loop={false} for screen-reader heavy pages.
  • With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.

FAQ

Also searched as: animated list react · notification feed animation · activity feed · live feed component · animated notification list