96:I[903690,["/chat-static/_next/static/immutable/chunks/0411bdxfbeniw.js","/chat-static/_next/static/immutable/chunks/24g-e1plqimjd.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/15te13l_0aokw.js","/chat-static/_next/static/immutable/chunks/3mqqjk7btl-q3.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/13swkeoj_7gd7.js","/chat-static/_next/static/immutable/chunks/0ox1w_skv5i01.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/03ggsewfdnt13.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/30g_pmqpnaqh0.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/3ak2clbc09163.js","/chat-static/_next/static/immutable/chunks/3xbcfm8ji-xnl.js","/chat-static/_next/static/immutable/chunks/2gu0aetgviqpj.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2j9ejspyv5gjj.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1kvzodmjemrnt.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/2kosfxqe1lmj7.js","/chat-static/_next/static/immutable/chunks/1ipe_dsc-e9gt.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/2ddpysx1qz1j9.js","/chat-static/_next/static/immutable/chunks/0kld-wnfh2dtn.js","/chat-static/_next/static/immutable/chunks/2hlt206nuvb_q.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1y-s_5v3gpgrs.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/1wdjjp6taywpy.js"],"ExplicitChatIdProvider"] 97:I[838238,["/chat-static/_next/static/immutable/chunks/0411bdxfbeniw.js","/chat-static/_next/static/immutable/chunks/24g-e1plqimjd.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/15te13l_0aokw.js","/chat-static/_next/static/immutable/chunks/3mqqjk7btl-q3.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/13swkeoj_7gd7.js","/chat-static/_next/static/immutable/chunks/0ox1w_skv5i01.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/03ggsewfdnt13.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/30g_pmqpnaqh0.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/3ak2clbc09163.js","/chat-static/_next/static/immutable/chunks/3xbcfm8ji-xnl.js","/chat-static/_next/static/immutable/chunks/2gu0aetgviqpj.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2j9ejspyv5gjj.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1kvzodmjemrnt.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/2kosfxqe1lmj7.js","/chat-static/_next/static/immutable/chunks/1ipe_dsc-e9gt.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/2ddpysx1qz1j9.js","/chat-static/_next/static/immutable/chunks/0kld-wnfh2dtn.js","/chat-static/_next/static/immutable/chunks/2hlt206nuvb_q.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1y-s_5v3gpgrs.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/1wdjjp6taywpy.js"],"SWRDataProvider"] 98:T2f67,[V0_FILE]typescriptreact:file="components/process-tracker.tsx" isMerged="true" "use client" import { Check } from "lucide-react" import { cn } from "@/lib/utils" interface ProcessTrackerProps { steps: string[] currentStep: number } export function ProcessTracker({ steps, currentStep }: ProcessTrackerProps) { return (

{/* Desktop View - Horizontal Transit Map */} {/* Mobile View - Vertical Timeline */}

) } function DesktopView({ steps, currentStep }: ProcessTrackerProps) { return (

{/* The Track - Gray line running behind the nodes */}

{/* Progress overlay on the track */}

{/* Nodes container */}

{steps.map((step, index) => { const isCompleted = index < currentStep const isActive = index === currentStep return (

{/* The Node */}

{isCompleted ? ( ) : ( {index + 1} )}

{/* The Label - Absolutely positioned to prevent jank */} {step}

) })}

) } function MobileView({ steps, currentStep }: ProcessTrackerProps) { return (

{steps.map((step, index) => { const isCompleted = index < currentStep const isActive = index === currentStep const isLast = index === steps.length - 1 return (

{/* Vertical connecting line */} {!isLast && (

)} {/* The Node */}

{isCompleted ? ( ) : ( {index + 1} )}

{/* The Label */} {step}

) })}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { ProcessTracker } from "@/components/process-tracker" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" const demoSteps = ["Select", "Review", "Confirm"] const longLabelSteps = ["Start", "Awaiting Verification", "Complete"] export default function Home() { const [currentStep, setCurrentStep] = useState(0) const [currentStep2, setCurrentStep2] = useState(1) return (

ProcessTracker Component

A jank-free, responsive process visualization component

{/* Demo 1: Basic Steps */} Basic Example Simple 3-step process with short labels

{/* Demo 2: Long Labels (Anti-Jank Test) */} Long Labels Test Demonstrates the anti-jank behavior with varying text lengths

{/* Demo 3: All States */} All States Preview Visual comparison of different progress states

Step 0 (Start)

Step 1 (In Progress)

Step 2 (Final Step)

Step 3 (Completed)

) }8c:["$","$L96",null,{"chatId":"vhXgeY0Mv16","children":["$","$L97",null,{"data":{"@\"active-block\",\"vhXgeY0Mv16\",":{"id":"b_IstX3BW6pVI","messageId":"loecEXdo4fSOYEKmZA2flFBykB8nMSkm","source":"$98","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Code","type":"code-project","taskNameActive":"Creating demo page","taskNameComplete":"Created demo page"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"vhXgeY0Mv16\",":false,"":null},"children":"$L99"}]}]

About

Tags

Share

About

Tags

Share

More from rcrades

More Templates Like This