Goal Card

A card component for displaying goal progress with status indicators and step tracking.

Launch MVP by end of quarter

75%

In Progress3/4 stepsDec 8, 2025

Complete user onboarding flow

100%

Completed3/3 stepsDec 1, 2025

Fix critical performance issues

30%

In Progress1/3 stepsDec 15, 2025

Usage in Gaia

Keeps users on track. Visualize high-level objectives and progress.

Features

Progress Bar - Visual progress indicator
Status Badge - Not started, in progress, completed, at risk
Step Tracking - Shows completed/total steps
Due Date - Displays deadline

Installation

npx shadcn@latest add https://ui.heygaia.io/r/goal-card.json

Usage

import { GoalCard } from "@/components/ui/goal-card";
 
export default function Example() {
  return (
    <GoalCard
      id="1"
      title="Launch MVP"
      progress={75}
      status="in_progress"
      steps={[
        { id: "1", title: "Design", completed: true },
        { id: "2", title: "Develop", completed: false },
      ]}
      onClick={(id) => console.log(id)}
    />
  );
}

Props

Prop	Type	Description
id	string	Unique identifier
title	string	Goal title
description	string	Optional description
progress	number	Progress 0-100
status	GoalStatus	Current status
steps	GoalStep[]	Array of steps
dueDate	Date \| string	Due date
onClick	(id) => void	Click handler

GoalStatus

"not_started" | "in_progress" | "completed" | "at_risk"

GitHub Stars Button Holo Card

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.