slidecn
uifragment-revealsource: ok · hit
Fragment Reveal
Steps through children one by one using fragment animations.
npx shadcn add "https://slidecn.vercel.app/r/fragment-reveal.json"free
Where it goes
onboarding
Interaction
scroll-reveal
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · light@revealjs/reactreveal.js
Files1 · source cached 10/9/2026, 10:43:29 PM
registry/slidecn/ui/fragment-reveal.tsx
"use client";
import { Fragment } from "@revealjs/react";
import type { ReactNode } from "react";
import type { FragmentAnimation } from "@/lib/slide-utils";
interface FragmentRevealProps {
children: ReactNode[];
animation?: FragmentAnimation;
stagger?: boolean;
}
const FragmentReveal = ({
children,
animation = "fade-in",
stagger = false,
}: FragmentRevealProps) => (
<>
{children.map((child, i) => (
<Fragment key={i} animation={animation} index={stagger ? i : undefined}>
{child}
</Fragment>
))}
</>
);
export { FragmentReveal };