# Activity Goal

> A focus-goal card with a 13-day recharts bar chart of minutes against an adjustable goal line, stepper buttons, a met count and a Set goal button that announces the saved value.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/activity-goal).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/activity-goal
- Screenshot: https://shadcn.exchange/shot/01orbital/activity-goal/light.png
- Registry item: https://01orbital.dev/r/activity-goal.json
- Categories: app
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/activity-goal.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@01orbital/activity-goal-card`, `@01orbital/button`

## Files

### `blocks/app/activity-goal/index.tsx`

```tsx
"use client"

import { useState } from "react"

import { ActivityGoalCard } from "@/components/activity/activity-goal-card"
import { Button } from "@/components/ui/button"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Focus goal",
  body: "Deep work, held to a line you set.",
  range: "Last 13 days",
  unit: "min",
  met: "met",
  cta: "Set goal",
  series: "Focus",
  saved: "Goal set to",
} as const

const STEPPER = { down: "Fewer minutes", up: "More minutes" } as const

const DAYS = [
  { id: "day-01", name: "M", value: 120 },
  { id: "day-02", name: "T", value: 80 },
  { id: "day-03", name: "W", value: 150 },
  { id: "day-04", name: "T", value: 60 },
  { id: "day-05", name: "F", value: 95 },
  { id: "day-06", name: "S", value: 140 },
  { id: "day-07", name: "S", value: 70 },
  { id: "day-08", name: "M", value: 110 },
  { id: "day-09", name: "T", value: 165 },
  { id: "day-10", name: "W", value: 90 },
  { id: "day-11", name: "T", value: 130 },
  { id: "day-12", name: "F", value: 55 },
  { id: "day-13", name: "S", value: 145 },
]

const STEP = 15
const MIN = 30
const MAX = 180

export default function ActivityGoal() {
  const [goal, setGoal] = useState(90)
  const [appliedGoal, setAppliedGoal] = useState<number | null>(null)

  return (
    <ActivityGoalCard
      title={COPY.title}
      description={COPY.body}
      data={DAYS}
      value={goal}
      onValueChange={setGoal}
      limits={{ min: MIN, max: MAX, step: STEP }}
      labels={{
        decrease: STEPPER.down,
        increase: STEPPER.up,
        unit: COPY.unit,
        range: COPY.range,
        series: COPY.series,
        met: (count) => (
          <>
            {count} {COPY.met}
          </>
        ),
      }}
      actions={
        <>
          <Button
            className="w-full"
            size="lg"
            onClick={() => setAppliedGoal(goal)}
          >
            {COPY.cta}
          </Button>
          <span role="status" className="sr-only">
            {appliedGoal != null && `${COPY.saved} ${appliedGoal} ${COPY.unit}`}
          </span>
        </>
      }
    />
  )
}
```