Skip to content

Twentyfirst UIHalo

HaloPro

Goal Card

Life · GoalCard

View as Markdown

A goal with its progress toward a target, a due date, milestones and a note.

format shows value and target as a number (with unit), money or a percentage.
The bar is a progressbar with the value in words ("€3,100 of €5,000").

PreviewCode

Emergency fundBy Jun 2027

62%

€3,100 of €5,000

€275 a month keeps you on track.

Run a half marathonBy Apr 2027

67%

14 km of 21 km

5 km without a break
10 km under an hour
15 km long run
Race day

Props

GoalCard

Prop	Type	Notes
`surface?`	`Surface`	`"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`.
`title`	`string`	Required
`value`	`number`	Required
`target`	`number`	Required
`format?`	`"number" \| "money" \| "percent"`	How to show value and target (default number).
`unit?`	`string`	Unit after numbers ("km", "books").
`currency?`	`string`
`due?`	`Date \| string \| number`
`icon?`	`IconName`
`tint?`	`Tint`
`milestones?`	`{ label: string; done?: boolean }[]`
`note?`	`ReactNode`	A note under the progress ("€250 a month keeps you on track").
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.