94:I[903690,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx"],"ExplicitChatIdProvider"] 95:I[838238,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx"],"SWRDataProvider"] 96: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)

) }8a:["$","$L94",null,{"chatId":"vhXgeY0Mv16","children":["$","$L95",null,{"data":{"@\"active-block\",\"vhXgeY0Mv16\",":{"id":"b_IstX3BW6pVI","messageId":"loecEXdo4fSOYEKmZA2flFBykB8nMSkm","source":"$96","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":"$L97"}]}]

About

Tags

Share

About

Tags

Share

More from rcrades

More Templates Like This