React Numbered Steps Timeline Block

React timeline with numbered circle markers. Built with Next.js, shadcn/ui, and Tailwind CSS.

A React numbered steps timeline block for Next.js applications built with TypeScript, shadcn/ui Badge component, and Tailwind CSS. Features large numbered circle markers with a vertical connecting line, expandable detail panels for each step, and hover-highlighted rows. Perfect for onboarding flows, process documentation, and step-by-step guides.

React Numbered Steps Timeline Block preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/timeline-numbered-steps.json

npx shadcn@latest add https://www.shadcn.io/r/timeline-numbered-steps.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/timeline-numbered-steps.json

bunx shadcn@latest add https://www.shadcn.io/r/timeline-numbered-steps.json

Gradient Connector Timeline

Timeline with gradient connecting line

Icon Markers Timeline

Timeline with unique Lucide icons per node

Status Indicators Timeline

Color-coded status timeline with legend

Animated Pulse Timeline

Timeline with pulsing active node animation

Onboarding Stepper

Linear numbered stepper for setup flows

Onboarding Checklist

Expandable setup checklist with progress tracking

FAQ

Last updated on March 24, 2026

Was this page helpful?

React Notification Timeline Block

React notification center timeline grouped by date. Built with Next.js, shadcn/ui, and Tailwind CSS.

React Onboarding Steps Timeline Block

React user onboarding timeline with progress tracking. Built with Next.js, shadcn/ui, and Tailwind CSS.

React Numbered Steps Timeline Block