Search for a command to run...
Keeps users on track. Visualize high-level objectives and progress.
npx shadcn@latest add https://ui.heygaia.io/r/goal-card.jsonimport { 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)}
/>
);
}| 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 |
"not_started" | "in_progress" | "completed" | "at_risk"