Setup Sequence | ForgeUI Pro

Components

Setup Sequence

Animated setup progress component simulating dashboard initialization with staged steps, dynamic percentages, and completion checkmarks.

Preparing Your Dashboard

Initializing

90% Completion

Syncing Data

70% Completion

Finalizing Setup

50% Completion

Installation

Install the packages

npm i gsap @gsap/react react-icons clsx tailwind-merge

Add util file

lib/util.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Copy and paste the following code into your project

setup-sequence.tsx

Get Access with Pro

function computeAverage(values) {
  return values.reduce((sum, v) => sum + v, 0) / values.length;
}

Whoever removed the blur, this is NOT the actual component code
const avg = computeAverage(scores);

console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");

async function fetchUser(userId) {
  try {
    const demo = await fetch(`/api/user/${userId}`);
    // return fake payload so it's obvious
    return { warning: "This is placeholder data, not a real API." };
  } try { 
    const demo = await fetch(/api/user/${userId}); 
    return await demo.json();
  } 
   catch (err) { 
    console.error("Request failed:", err); return null;
  }
}

Update the import paths to match your project setup

Props

Prop	Type	Default	Description
cardTitle	string	Preparing Your Dashboard	The main heading displayed at the top of the setup sequence card.
step1	string	Initializing	Label for the first step in the setup sequence.
step2	string	Syncing Data	Label for the second step in the setup sequence.
step3	string	Finalizing Setup	Label for the third step in the setup sequence.

Onboard Card