Skip to content
Display

Goal Card

Server Component

Objective card with progress, status, steps, and a due date.

Import

tsx
import { GoalCard } from "@cronus-ui/ui";
bash
npx cronus-ui add goal-card

Examples

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

GoalCardLabels

Skip GoalCardLabels props table
PropTypeDefaultDescription
notStarted*
string——
inProgress*
string——
completed*
string——
atRisk*
string——
steps*
string——
viewGoal*
string——
deleteGoal*
string——
progress*
string——

GoalCardProps

Extends Omit<HTMLAttributes<HTMLElement>, "title" | "onClick" | "id">, VariantProps<typeof goalCardVariants>

Skip GoalCardProps props table
PropTypeDefaultDescription
ref
Ref<HTMLElement>—Ref forwarded to the underlying DOM node.
id*
string——
title*
string——
description
string——
progress
number——
status
GoalStatus——
steps
GoalStep[]——
roadmap
GoalRoadmap——
dueDate
string | Date——
createdAt
string | Date——
onClick
(id: string) => void——
onDelete
(id: string) => void——
locale
string"en-US"—
labels
Partial<GoalCardLabels>—Override default English strings.
footer
ReactNode——
asChild
boolean—Render as the child element via Slot.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.