slidecn
uifragment-listsource: ok · hit
Fragment List
A list wrapper with fragment-based reveal animations on each item.
npx shadcn add "https://slidecn.vercel.app/r/fragment-list.json"free
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/8/2026, 10:24:44 PM
registry/slidecn/ui/fragment-list.tsx
"use client";
import { Fragment } from "@revealjs/react";
import type { ReactNode } from "react";
import type { FragmentAnimation } from "@/lib/slide-utils";
interface FragmentListProps {
items: ReactNode[];
as?: "ul" | "ol";
animation?: FragmentAnimation;
stagger?: boolean;
}
const FragmentList = ({
items,
as: Tag = "ul",
animation = "fade-up",
stagger = false,
}: FragmentListProps) => (
<Tag className="flex flex-col gap-3">
{items.map((item, i) => (
<Fragment
key={i}
as="li"
animation={animation}
index={stagger ? i : undefined}
>
{item}
</Fragment>
))}
</Tag>
);
export { FragmentList };