Shadcn.io is not affiliated with official shadcn/ui
Timeline Waterfall
React cascading waterfall timeline with progressive indentation built with Next.js, shadcn/ui Badge, and Tailwind CSS
A distinctive staircase timeline built with React, Next.js, TypeScript, shadcn/ui Badge component, and Tailwind CSS. Each entry cascades progressively to the right, creating a waterfall effect with L-shaped connector lines that trace the path from one level to the next. Status-based dot markers use CheckIcon, CircleDotIcon, and CircleIcon from Lucide React, with the active step featuring a pulsing animation. Perfect for deployment pipelines, onboarding flows, and multi-stage processes where each step builds on the last.
Related Components
Branching Timeline
Fork and merge parallel workstream tracks
Zigzag Timeline
Entries zigzag left and right with diagonal connectors
Tree Timeline
Trunk-and-branch tree structure timeline
Ribbon Timeline
Horizontal ribbon band with pin markers
Vertical Dots Timeline
Classic vertical timeline with prominent dot markers
Alternating Cards Timeline
Entries alternate left and right of a centered spine
FAQ
Was this page helpful?
Sign in to leave feedback.