Task Pinboard | ForgeUI Pro

Components

Task Pinboard

Animated task pinboard to pin and manage tasks with smooth transitions and intuitive interactions.

All Tasks

Morning Workout

Health · Due: 8 AM

Team Meeting

Work · 10:30 AM

Code Review

Work · 1:00 PM

Read 20 Pages

Personal · Evening

Meditation

Mindfulness · Before Sleep

Installation

Install the packages

npm i motion 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

task-pinboard.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
tasks	Task[]	defaultTasks	Array of task objects to be displayed on the pinboard.
Task.id	number	1	Unique identifier for each task (used as key).
Task.name	string	"Morning Workout"	Name/title of the task to display.
Task.category	string	"Health"	Category or grouping label for the task (e.g., Work, Personal, Health).
Task.hours	string	"Due: 8 AM"	Time or schedule label for the task.
Task.Icon	React.FC<React.SVGProps<SVGSVGElement>>	<GiGymBag />	Icon component representing the task.
Task.pinned	boolean	false	Whether the task is pinned (highlighted or prioritized).

Stack Ripple