Animated Group

A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components.

Animated Group

A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components.

Examples

Animated Group with preset

Images are from cosmos - Impressionisme

impressionist painting, uploaded to Cosmos

Animated Group with custom variants

AnimatedGroup with custom variants

Installation

npx shadcn@latest add "https://components.dylanwlim.com/c/animated-group.json"

Component API

AnimatedGroup

Prop	Type	Default	Description
children	ReactNode		The child elements to be animated.
className	string	undefined	Optional CSS class for styling the component.
variants	`{ container?: Variants; item?: Variants; }`	undefined	Custom variants for container and item animations.
preset	'fade' \| 'slide' \| 'scale' \| 'blur-sm' \| 'blur-slide'	undefined	Preset animations to apply to the group of elements.
as	React.ElementType	'div'	The HTML element to render the component as.
asChild	React.ElementType	'div'	The HTML element to render the child elements as.

Animated Background Border Trail

On This Page

Animated Group Examples Animated Group with preset Animated Group with custom variants AnimatedGroup with custom variants Installation Component API AnimatedGroup

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.