Yami UI

Stagger children with a shared entrance preset.

Installation

Requires MotionProvider and gsap. Add the stagger group component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/stagger-group.json

Usage

import { StaggerGroup } from "@/void/scroll/stagger-group"

<StaggerGroup gap={0.12} duration={0.7} className="flex w-full max-w-md gap-2">
  {items.map((item) => (
    <div key={item.id} className="h-16 flex-1 rounded-lg bg-muted" />
  ))}
</StaggerGroup>

Examples

Default

Code

import { StaggerGroup } from "@/void/scroll/stagger-group"

<StaggerGroup gap={0.12} duration={0.7} className="flex w-full max-w-md gap-2">
  {items.map((item) => (
    <div key={item.id} className="h-16 flex-1 rounded-lg bg-muted" />
  ))}
</StaggerGroup>