๐ŸŽฏ Nexus teaches Next.js from foundations to professional systemsโ€ขโšก App Router, React 19, and Tailwind v4 in one learning pathโ€ข๐Ÿงฉ Inspect real components, layouts, and reusable patternsโ€ข๐Ÿ› ๏ธ Build production discipline, not just polished demosโ€ข๐Ÿ“š Tracks, references, and design studies in one placeโ€ข๐ŸŽฏ Nexus teaches Next.js from foundations to professional systemsโ€ขโšก App Router, React 19, and Tailwind v4 in one learning pathโ€ข๐Ÿงฉ Inspect real components, layouts, and reusable patternsโ€ข๐Ÿ› ๏ธ Build production discipline, not just polished demosโ€ข๐Ÿ“š Tracks, references, and design studies in one placeโ€ข๐ŸŽฏ Nexus teaches Next.js from foundations to professional systemsโ€ขโšก App Router, React 19, and Tailwind v4 in one learning pathโ€ข๐Ÿงฉ Inspect real components, layouts, and reusable patternsโ€ข๐Ÿ› ๏ธ Build production discipline, not just polished demosโ€ข๐Ÿ“š Tracks, references, and design studies in one placeโ€ข๐ŸŽฏ Nexus teaches Next.js from foundations to professional systemsโ€ขโšก App Router, React 19, and Tailwind v4 in one learning pathโ€ข๐Ÿงฉ Inspect real components, layouts, and reusable patternsโ€ข๐Ÿ› ๏ธ Build production discipline, not just polished demosโ€ข๐Ÿ“š Tracks, references, and design studies in one placeโ€ข
Data

Timeline

Vertical event timeline with completed, active, and pending states.

Quick Preview

  1. Order placed

    Your order #4821 was placed successfully.

  2. Payment confirmed

    Payment of $149.00 was confirmed.

  3. Shipped

    Package dispatched from warehouse.

  4. Out for delivery

    The courier is on the way.

  5. Delivered

    Package delivered to your address.

Installation

// Copy from
src/components/data/Timeline.tsx

Examples

All statuses

  1. Completed step

    This step is done.

  2. Current step

    You are here.

  3. Upcoming step

    Not started yet.

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Tweak only product-specific copy or data after the first generation pass.

Props

PropTypeDefaultDescription
events*TimelineEvent[]-Array of timeline events
classNamestring-Additional CSS classes