saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesign

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemSaturation Credit CardTableTree

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor
Docs/Components/Animated Group

Animated Group

Animates a group of elements with staggered entry/exit.

Loading...

Installation

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

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 { AnimatedGroup } from "@/components/ui/animated-group"
<AnimatedGroup preset="fade">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</AnimatedGroup>

Examples

Slide

Loading...
Slide up animation.

Blur Slide

Loading...
Blur and slide entrance.

Scale

Loading...
Scale up animation.

Zoom

Loading...
Zoom with spring physics.

Project Cards

Loading...
Staggered card grid.

Custom Variants

Loading...
Custom animation variants.

Hover

Loading...
Animate on hover.

API Reference

PropTypeDefaultDescription
preset"fade" | "blur" | "slide" | "scale"—Animation preset.
staggernumber0.1Stagger delay between items.
PreviousAlertNextAnimated List

On This Page

  • Installation
  • Usage
  • Examples
  • Slide
  • Blur Slide
  • Scale
  • Zoom
  • Project Cards
  • Custom Variants
  • Hover
  • API Reference
1
2
3
4
A
B
C
D
First item fades in with blur
Second item follows with stagger
Third item appears after a delay
Final item completes the sequence
Fast
Secure
Global
Launch
Active

Dashboard

In Progress

Analytics

Active

API Gateway

Review

Auth Service

In Progress

Mobile App

Active

Design System

01
02
03
04

Hover to replay animation

H
O
V
E
R