BricksLab Catalog

@brickslab/ui-web

Displays an array of items with staggered sequential animations. Each item slides in with customizable timing, direction, and easing. Perfect for lists, notifications, and entry effects.

Aperçu

Default (Slide Up, 150ms stagger)

✓ Item 1 - Animated in

✓ Item 2 - Smooth transition

✓ Item 3 - Sequential timing

Slide Down with Longer Stagger

→ Sliding down from top

→ With 300ms stagger delay

→ Slower sequential effect

Max Visible Items (3 of 5)

Shown 1/5

Shown 2/5

Shown 3/5

Props Table

Prop	Type	Défaut	Requis	Description
`items`	`React.ReactNode[]`	—	✓	Array of items to display and animate.
`delay`	`number`	`0`	—	Initial delay before animation starts (ms).
`stagger`	`number`	`150`	—	Delay between each item animation (ms).
`duration`	`number`	`600`	—	Duration of each item animation (ms).
`direction`	`"up" \| "down"`	`"up"`	—	Animation direction: "up" (slide from bottom), "down" (slide from top).
`maxVisible`	`number`	—	—	Limit number of visible items.
`className`	`string`	—	—	Container CSS class.
`itemClassName`	`string`	—	—	CSS class for each item.

Usage

tsx

import { AnimatedList } from "@brickslab/ui-web";

const items = [
  <div>Item 1</div>,
  <div>Item 2</div>,
  <div>Item 3</div>,
];

// Default (slide up, staggered)
<AnimatedList items={items} />

// Custom stagger
<AnimatedList items={items} stagger={300} duration={800} />

// Slide down
<AnimatedList items={items} direction="down" />

// Max visible items
<AnimatedList items={items} maxVisible={3} />