96:I[903690,["/chat-static/_next/static/immutable/chunks/1s38b5er7hbv8.js","/chat-static/_next/static/immutable/chunks/0ic6a6ps43-np.js","/chat-static/_next/static/immutable/chunks/2enw2ezzmjrzd.js","/chat-static/_next/static/immutable/chunks/055eeu4yqz_8r.js","/chat-static/_next/static/immutable/chunks/3h9c9xa_ce096.js","/chat-static/_next/static/immutable/chunks/1y8f_921aawwo.js","/chat-static/_next/static/immutable/chunks/0d2mcgj-q16do.js","/chat-static/_next/static/immutable/chunks/02r6x1jrr6bjz.js","/chat-static/_next/static/immutable/chunks/22rize2mf-358.js","/chat-static/_next/static/immutable/chunks/0kqis8e7ip_dq.js","/chat-static/_next/static/immutable/chunks/0re7e5f0cowr7.js","/chat-static/_next/static/immutable/chunks/2fuq3dzrsdm_0.js","/chat-static/_next/static/immutable/chunks/40oczuspnd9lh.js","/chat-static/_next/static/immutable/chunks/12jgl_43mlhsg.js","/chat-static/_next/static/immutable/chunks/2bziwuklsua7x.js","/chat-static/_next/static/immutable/chunks/0otu53e7w71be.js","/chat-static/_next/static/immutable/chunks/3egtc_86flmig.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/21b4squl5r8au.js","/chat-static/_next/static/immutable/chunks/43gfst54wug0y.js","/chat-static/_next/static/immutable/chunks/38ti4hx2285mi.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0g4_0g2ih2szk.js","/chat-static/_next/static/immutable/chunks/2-wdjxm1l1tgc.js","/chat-static/_next/static/immutable/chunks/44ac-26ybftd3.js","/chat-static/_next/static/immutable/chunks/0sg7s8mat8wbm.js","/chat-static/_next/static/immutable/chunks/3cg2lu5nlxz19.js","/chat-static/_next/static/immutable/chunks/2_-vkr9dhj5p_.js","/chat-static/_next/static/immutable/chunks/0ajqvtd47_5sl.js","/chat-static/_next/static/immutable/chunks/1k6hw0zz-xg-o.js","/chat-static/_next/static/immutable/chunks/0r0ce_rhuu-vw.js","/chat-static/_next/static/immutable/chunks/1-89w3467jpe0.js","/chat-static/_next/static/immutable/chunks/1mom5in5gecbc.js","/chat-static/_next/static/immutable/chunks/1di-zl73drzjt.js","/chat-static/_next/static/immutable/chunks/29f13ut0uqd3g.js","/chat-static/_next/static/immutable/chunks/364l0i5oyhodb.js","/chat-static/_next/static/immutable/chunks/2vru7ekzafb8c.js"],"ExplicitChatIdProvider"] 97:I[838238,["/chat-static/_next/static/immutable/chunks/1s38b5er7hbv8.js","/chat-static/_next/static/immutable/chunks/0ic6a6ps43-np.js","/chat-static/_next/static/immutable/chunks/2enw2ezzmjrzd.js","/chat-static/_next/static/immutable/chunks/055eeu4yqz_8r.js","/chat-static/_next/static/immutable/chunks/3h9c9xa_ce096.js","/chat-static/_next/static/immutable/chunks/1y8f_921aawwo.js","/chat-static/_next/static/immutable/chunks/0d2mcgj-q16do.js","/chat-static/_next/static/immutable/chunks/02r6x1jrr6bjz.js","/chat-static/_next/static/immutable/chunks/22rize2mf-358.js","/chat-static/_next/static/immutable/chunks/0kqis8e7ip_dq.js","/chat-static/_next/static/immutable/chunks/0re7e5f0cowr7.js","/chat-static/_next/static/immutable/chunks/2fuq3dzrsdm_0.js","/chat-static/_next/static/immutable/chunks/40oczuspnd9lh.js","/chat-static/_next/static/immutable/chunks/12jgl_43mlhsg.js","/chat-static/_next/static/immutable/chunks/2bziwuklsua7x.js","/chat-static/_next/static/immutable/chunks/0otu53e7w71be.js","/chat-static/_next/static/immutable/chunks/3egtc_86flmig.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/21b4squl5r8au.js","/chat-static/_next/static/immutable/chunks/43gfst54wug0y.js","/chat-static/_next/static/immutable/chunks/38ti4hx2285mi.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0g4_0g2ih2szk.js","/chat-static/_next/static/immutable/chunks/2-wdjxm1l1tgc.js","/chat-static/_next/static/immutable/chunks/44ac-26ybftd3.js","/chat-static/_next/static/immutable/chunks/0sg7s8mat8wbm.js","/chat-static/_next/static/immutable/chunks/3cg2lu5nlxz19.js","/chat-static/_next/static/immutable/chunks/2_-vkr9dhj5p_.js","/chat-static/_next/static/immutable/chunks/0ajqvtd47_5sl.js","/chat-static/_next/static/immutable/chunks/1k6hw0zz-xg-o.js","/chat-static/_next/static/immutable/chunks/0r0ce_rhuu-vw.js","/chat-static/_next/static/immutable/chunks/1-89w3467jpe0.js","/chat-static/_next/static/immutable/chunks/1mom5in5gecbc.js","/chat-static/_next/static/immutable/chunks/1di-zl73drzjt.js","/chat-static/_next/static/immutable/chunks/29f13ut0uqd3g.js","/chat-static/_next/static/immutable/chunks/364l0i5oyhodb.js","/chat-static/_next/static/immutable/chunks/2vru7ekzafb8c.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},"children":"$L99"}]}]

About

Tags

Share

About

Tags

Share

More from rcrades

More Templates Like This