Animated List - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/animated-list

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<AnimatedList
  items={items}
  renderItem={(item) => <div>{item.text}</div>}
/>

API Reference

Prop	Type	Default	Description
`items`	`T[]`	—	Array of items with unique `id` field.
`renderItem`	`(item: T, index: number) => ReactNode`	—	Render function for each item.
`maxVisible`	`number`	`8`	Maximum visible items.
`gap`	`number`	`12`	Gap between items in pixels.
`animation`	`'scale' \| 'slide' \| 'fade' \| 'bounce'`	`'scale'`	Animation style.

Krotos Studio

Approved

$19.99

Jun 16

Musicbed

Approved

$29.99

Jun 16

Starbucks

Needs Receipt

$15.00

Jun 16

Filmsupply

Approved

$199.00

Jun 16

McDonald's

Needs Receipt

$8.22

Jun 15

Installation

pnpm dlx shadcn@latest add @saturation-ui/animated-list

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<AnimatedList
  items={items}
  renderItem={(item) => <div>{item.text}</div>}
/>

API Reference

Prop	Type	Default	Description
`items`	`T[]`	—	Array of items with unique `id` field.
`renderItem`	`(item: T, index: number) => ReactNode`	—	Render function for each item.
`maxVisible`	`number`	`8`	Maximum visible items.
`gap`	`number`	`12`	Gap between items in pixels.
`animation`	`'scale' \| 'slide' \| 'fade' \| 'bounce'`	`'scale'`	Animation style.