Todo List Timeline
A vertical timeline todo list block for React and Next.js with connected dots, completion tracking, and staggered animations built with shadcn/ui and Tailwind CSS
Visualize task progress along a vertical timeline with this timeline todo list block for React and Next.js. Features connected dots with a vertical line, filled dots for completed tasks and outlined dots for pending ones, plus task metadata positioned alongside each node. Built with TypeScript, shadcn/ui Checkbox and Button components, framer-motion staggered entrance animations, and Tailwind CSS. Ideal for project milestones, sequential workflows, and sprint planning boards.
Related Components
Progress Board Todo List
Visual progress tracking with sliders
Nested Todo List
Multi-level deep nesting
Grouped Todo List
Tasks organized by category
Analytics Todo List
Task statistics dashboard
Split View Todo List
List with detail panel
Minimal Todo List
Ultra-minimal design
FAQ
Was this page helpful?
Sign in to leave feedback.
Time Tracking
A todo list block with per-task time logging for React and Next.js featuring play/pause timers, pulsing active indicators, daily totals, and logged duration display built with shadcn/ui and Tailwind CSS
Travel
A travel itinerary block for React and Next.js with day-by-day sections, timed activities, location pins, booking status badges, and transportation indicators built with shadcn/ui and Tailwind CSS