saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Animated Group

Animated Group

Animates a group of elements with staggered entry/exit.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/animated-group.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). 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 Number

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