Animated List

component

Children that stagger in as they scroll into view. Ideal for feeds and notifications.

Deploy succeeded

New signup

Payment received

Installation

Namespace

npx shadcn@latest add @soultel/animated-list

URL

npx shadcn@latest add https://asafefe.dev/r/animated-list.json

Dependenciesmotion

Usage

usage.tsx

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

export function Example() {
  return (
    <AnimatedList className="flex flex-col gap-2">
      <div>First</div>
      <div>Second</div>
      <div>Third</div>
    </AnimatedList>
  )
}