{"record":{"id":"2c1af0a534bdfae7","repo":"shadcn-ui/ui","slug":"useprogress-must-be-used-within-a-progress","errorCode":null,"errorMessage":"useProgress must be used within a Progress.","messagePattern":"useProgress must be used within a Progress\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"apps/v4/registry/bases/aria/ui/progress.tsx","lineNumber":24,"sourceCode":"  ProgressBar as ProgressPrimitive,\n  type LabelProps,\n  type ProgressBarProps as ProgressPrimitiveProps,\n} from \"react-aria-components\"\n\nimport { cn } from \"@/registry/bases/aria/lib/utils\"\n\ntype ProgressContextValue = {\n  percentage?: number\n  isIndeterminate: boolean\n  valueText?: string\n}\n\nconst ProgressContext = React.createContext<ProgressContextValue | null>(null)\n\nfunction useProgress() {\n  const context = React.useContext(ProgressContext)\n  if (!context) {\n    throw new Error(\"useProgress must be used within a Progress.\")\n  }\n\n  return context\n}\n\nfunction ProgressContent({\n  children,\n  percentage,\n  isIndeterminate,\n  valueText,\n}: ProgressContextValue & {\n  children?: React.ReactNode\n}) {\n  const context = React.useMemo(\n    () => ({ percentage, isIndeterminate, valueText }),\n    [percentage, isIndeterminate, valueText]\n  )\n","sourceCodeStart":6,"sourceCodeEnd":42,"githubUrl":"https://github.com/shadcn-ui/ui/blob/efac5987074af84ece57c367c6dd83387b967022/apps/v4/registry/bases/aria/ui/progress.tsx#L6-L42","documentation":"`useProgress` reads `ProgressContext` (`createContext<ProgressContextValue | null>(null)`); `<ProgressContent>` supplies `{ percentage, isIndeterminate, valueText }`. A consumer rendered outside `<ProgressContent>` (or `<Progress>` that composes it) throws so progress rendering never reads null.","triggerScenarios":"Mounting an aria-style progress sub-component (e.g. a custom indicator that calls `useProgress()`) outside `<ProgressContent>` / `<Progress>`. Happens when decomposing the progress composition for a bespoke layout.","commonSituations":"Building a custom progress layout; reusing the inner indicator in isolation; tests rendering the indicator alone.","solutions":["Place any `useProgress()` consumer inside `<ProgressContent>` (or `<Progress>` that mounts it), passing `percentage`/`isIndeterminate`/`valueText` as needed.","If you need a standalone indicator, pass props directly instead of via the hook.","Decorate tests/stories with `<ProgressContent>`."],"exampleFix":"// before\n<ProgressIndicator />\n\n// after\n<Progress>\n  <ProgressContent percentage={42} isIndeterminate={false}>\n    <ProgressIndicator />\n  </ProgressContent>\n</Progress>","handlingStrategy":"type-guard","validationCode":"render(<Progress><ProgressContent percentage={50} isIndeterminate={false}>{<Indicator/>}</ProgressContent></Progress>)","typeGuard":"import React from \"react\"\nimport { ProgressContext } from \"@/registry/bases/aria/ui/progress\"\nconst insideProgress = () => React.useContext(ProgressContext) != null","tryCatchPattern":"try { useProgress() } catch (e) { if (e.message.includes(\"Progress.\")) {/*nest under ProgressContent*/} throw e }","preventionTips":["Put any useProgress() consumer inside <ProgressContent> (or <Progress>).","For standalone indicators, pass props directly instead of the hook.","Add <ProgressContent> to story/test decorators."],"tags":["react","context","hooks","shadcn","progress","aria-style"],"backgroundTag":null,"analyzedSha":"efac5987074af84ece57c367c6dd83387b967022","analyzedAt":"2026-08-12T05:00:50.218Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}