95:I[903690,["/chat-static/_next/static/immutable/chunks/3250qx4rnxn53.js","/chat-static/_next/static/immutable/chunks/3t8739z7672ik.js","/chat-static/_next/static/immutable/chunks/0f9j9o34vqsba.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/0lhz_ycnf27n4.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/07attxcc59by5.js","/chat-static/_next/static/immutable/chunks/0ji-4z4hojzv6.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3uplw8rjmre3b.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/28x4j9l1x0i41.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/2jsx7o-k1a_c-.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/1rf9si_nu5pz6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/3ngyb01yn79fm.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/1_-wbix553va7.js","/chat-static/_next/static/immutable/chunks/2i5c0g9id981b.js","/chat-static/_next/static/immutable/chunks/3fgi0dq3-6fop.js","/chat-static/_next/static/immutable/chunks/2sbx5dyug89-d.js","/chat-static/_next/static/immutable/chunks/3c9r9miydr_3p.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/0dc6qhohn6msp.js","/chat-static/_next/static/immutable/chunks/2q9_k4e2rhaqp.js","/chat-static/_next/static/immutable/chunks/37t7w8j3sfcl9.js","/chat-static/_next/static/immutable/chunks/3_qy0apfdd1fn.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/27zz7x24-oste.js","/chat-static/_next/static/immutable/chunks/3uxd60wb1qwuj.js"],"ExplicitChatIdProvider"] 96:I[838238,["/chat-static/_next/static/immutable/chunks/3250qx4rnxn53.js","/chat-static/_next/static/immutable/chunks/3t8739z7672ik.js","/chat-static/_next/static/immutable/chunks/0f9j9o34vqsba.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/0lhz_ycnf27n4.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/07attxcc59by5.js","/chat-static/_next/static/immutable/chunks/0ji-4z4hojzv6.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3uplw8rjmre3b.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/28x4j9l1x0i41.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/2jsx7o-k1a_c-.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/1rf9si_nu5pz6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/3ngyb01yn79fm.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/1_-wbix553va7.js","/chat-static/_next/static/immutable/chunks/2i5c0g9id981b.js","/chat-static/_next/static/immutable/chunks/3fgi0dq3-6fop.js","/chat-static/_next/static/immutable/chunks/2sbx5dyug89-d.js","/chat-static/_next/static/immutable/chunks/3c9r9miydr_3p.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/0dc6qhohn6msp.js","/chat-static/_next/static/immutable/chunks/2q9_k4e2rhaqp.js","/chat-static/_next/static/immutable/chunks/37t7w8j3sfcl9.js","/chat-static/_next/static/immutable/chunks/3_qy0apfdd1fn.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/27zz7x24-oste.js","/chat-static/_next/static/immutable/chunks/3uxd60wb1qwuj.js"],"SWRDataProvider"] 97: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)

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

About

Tags

Share

About

Tags

Share

About

Tags

Share

More from rcrades

More Templates Like This