saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesignComposing a Detail Panel

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSplit ButtonSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxColor PickerComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemMarkdownSaturation Credit CardStatus BadgeTableTree

Detail Panels

Detail FieldDetail HeroDetail Toolbar

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuHover CardSheet

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