Activity goal

Shows a supplied activity amount and target with native progress, visible units, and distinct missing-data states.

Preview

Walking

18 of 30 minutes

In action

Work toward your own goal

Today

Walking

Your personal daily target

24 of 30 min

When to use

Use it for

Movement, hydration, or another activity with a caller-supplied amount, unit, and positive target.
null for missing current data or an unset target; zero remains a valid recorded amount.
Actual values above the target remain visible while the native bar stops at its maximum.

Not for

Adding default health recommendations or interpreting goal completion as a clinical outcome.
An indeterminate loading state; missing data is explicitly labelled and has no progress bar.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { ActivityGoal } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/activity-goal.

2. Vendor the source

npx @noorddev/vlak-cli add activity-goal

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/activity-goal.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { ActivityGoal } from "@noorddev/vlak-react";

<ActivityGoal label="Walking" description="Your personal goal for today" current={24} target={30} unit="min" />
<ActivityGoal label="Water recorded" current={null} target={null} unit="ml" />

Props

ActivityGoal

Progress toward a supplied activity goal, without recommended targets or scores.

Prop	Type	Description
`label`required	`ReactNode`
`description`	`ReactNode`
`current`required	`number \| null`	A supplied amount. null means no recorded amount; zero is a valid record.
`target`required	`number \| null`	A positive caller-owned goal. null means no goal has been set.
`unit`required	`string`

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

The native progress element is named by the visible label, aria-label, or aria-labelledby; aria-valuetext includes the actual amount, target, and unit.
Missing, non-finite, negative amounts and non-positive targets have explicit text states and never produce a misleading bar or NaN attributes.
Goal reached and goal exceeded remain text, with no color-only completion signal.
The forwarded ref and native attributes reach the root div; descriptions are linked to progress.

Markup

<div class="rs-activity-goal"><p class="rs-activity-goal-label" id="walking-goal">Walking</p><p class="rs-activity-goal-description">Your personal goal for today</p><p class="rs-activity-goal-value">24 <span class="rs-activity-goal-target">of 30 min</span></p><progress class="rs-activity-goal-progress" value="24" max="30" aria-labelledby="walking-goal" aria-valuetext="24 of 30 min">24 of 30 min</progress></div>

Classes

.rs-activity-goal.rs-activity-goal-label.rs-activity-goal-description.rs-activity-goal-value.rs-activity-goal-target.rs-activity-goal-progress