Photonix

GoalWidget

A widget for tracking progress towards a specific goal or target.

Preview

Example coverage

Docs migration

82%

Target: 109 routes

89 examples

82%

Generated from source-first examples

Usage
"use client";

import { GoalWidget } from '@photonix/ultimate';

export default function GoalWidgetBasicExample() {
    return (
        <GoalWidget
            title="Example coverage"
            subtitle="Docs migration"
            value={82}
            currentLabel="89 examples"
            targetLabel="109 routes"
            progressLabel="82%"
            color="brand"
            footer="Generated from source-first examples"
        />
    );
}

Component API

GoalWidget

Prop
Type
Default
Description
title
string
-
subtitle
string
-
value
number
-
currentLabel
string
-
targetLabel
string
-
progressLabel
string
-
actions
React.ReactNode
-
loading
boolean
false
Loading state
appearance
WidgetAppearance
'outlined'
Widget appearance
padding
string | number
-
Widget padding (default: 16px)
style
React.CSSProperties
-
Custom style
className
string
-
Custom class name
footer
React.ReactNode
-
color
"primary" | "mint" | "purple" | "brand" | "success" | "error" | "warning"
-

Variants

Standard Goal

Standard tracking with title, progress bar, and labels.

Sales Target

65%

Target: 1,000 Sales

Current

65%

Standard Goal
"use client";

import { Box, GoalWidget } from '@photonix/ultimate';

export default function GoalWidgetStandardExample() {
    return (
        <Box w="100%">
            <GoalWidget title="Sales Target" value={65} targetLabel="1,000 Sales" />
        </Box>
    );
}

Loading State

Displays a skeleton preview while data is being fetched.

Annual Target

Loading State
"use client";

import { Box, GoalWidget } from '@photonix/ultimate';

export default function GoalWidgetLoadingExample() {
    return (
        <Box w="100%">
            <GoalWidget title="Annual Target" loading value={0} />
        </Box>
    );
}

With Footer

Add extra information or actions using the footer prop.

Project Completion

Phase 2 of 5

8 tasks remaining across 3 teams

With Footer
"use client";

import { Box, GoalWidget } from '@photonix/ultimate';

export default function GoalWidgetFooterExample() {
    return (
        <Box w="100%">
            <GoalWidget title="Project Completion" value={42} progressLabel="Phase 2 of 5" footer="8 tasks remaining across 3 teams" />
        </Box>
    );
}

On this page

Preview
Component API
Variants
Standard Goal
Loading State
With Footer
Photonix UI - React Components, Templates & Figma Design System