{"record":{"id":"8422e55faf869e74","repo":"tailwindlabs/headlessui","slug":"a-transition-is-used-but-it-is-missing-a-show","errorCode":null,"errorMessage":"A <Transition /> is used but it is missing a `show={true | false}` prop.","messagePattern":"A <Transition /> is used but it is missing a `show=(.+?)` prop\\.","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/@headlessui-react/src/components/transition/transition.tsx","lineNumber":525,"sourceCode":"  let { show, appear = false, unmount = true, ...theirProps } = props as typeof props\n  let internalTransitionRef = useRef<HTMLElement | null>(null)\n  let requiresRef = shouldForwardRef(props)\n\n  let transitionRef = useSyncRefs(\n    ...(requiresRef ? [internalTransitionRef, ref] : ref === null ? [] : [ref])\n  )\n\n  // The TransitionChild will also call this hook, and we have to make sure that we are ready.\n  useServerHandoffComplete()\n\n  let usesOpenClosedState = useOpenClosed()\n\n  if (show === undefined && usesOpenClosedState !== null) {\n    show = (usesOpenClosedState & State.Open) === State.Open\n  }\n\n  if (show === undefined) {\n    throw new Error('A <Transition /> is used but it is missing a `show={true | false}` prop.')\n  }\n\n  let [state, setState] = useState(show ? TreeStates.Visible : TreeStates.Hidden)\n\n  let nestingBag = useNesting(() => {\n    if (show) return\n    setState(TreeStates.Hidden)\n  })\n\n  let [initial, setInitial] = useState(true)\n\n  // Change the `initial` value\n  let changes = useRef([show])\n  useIsoMorphicEffect(() => {\n    // We can skip this effect\n    if (initial === false) {\n      return\n    }","sourceCodeStart":507,"sourceCodeEnd":543,"githubUrl":"https://github.com/tailwindlabs/headlessui/blob/eea57cf46fd6767ed1059012f7073b88eb159fba/packages/@headlessui-react/src/components/transition/transition.tsx#L507-L543","documentation":"<Transition> (TransitionRootFn) is a controlled visibility component: it needs to know whether content is shown. show may be inferred from a parent open-closed provider (e.g. inside a Dialog that uses CloseProvider), but if after that inference show is still undefined, Headless UI throws because it cannot decide the initial state. This is a required-prop guard, not a runtime state error.","triggerScenarios":"Rendering <Transition> or <Transition.Root> with no show prop and no surrounding open/closed context provider; passing show={undefined} due to conditional props or an unset variable; using <Transition appear> without show expecting it to behave like CSS-only animations.","commonSituations":"Copy-pasting a Transition example and deleting the show prop; wiring show to state that is undefined at first render (lazy-initialized stores); refactoring from Transition.Child to Transition without adding show; version differences in Dialog-provided open state inference.","solutions":["Add the show prop: <Transition show={isOpen} ...>","Ensure the value passed to show is a boolean, default it: show={isOpen ?? false}","If inside a Dialog, either rely on Dialog's open state (render Transition as a Dialog child) or pass show explicitly","For always-on CSS transitions without visibility control, use plain CSS classes instead of Transition"],"exampleFix":"// before\n<Transition enter=\"transition\" enterFrom=\"opacity-0\">\n  <div>Content</div>\n</Transition>\n\n// after\n<Transition show={isOpen} enter=\"transition\" enterFrom=\"opacity-0\">\n  <div>Content</div>\n</Transition>","handlingStrategy":"type-guard","validationCode":"const show = maybeShow ?? false;\n<Transition show={show} ...>...</Transition>","typeGuard":"const hasShowProp = (p) => typeof p.show === 'boolean';","tryCatchPattern":null,"preventionTips":["Always pass an explicit boolean to show","Default unset state: show={isOpen ?? false}","Don't strip props when spreading wrappers around Transition"],"tags":["headlessui","react","transition","props","controlled-component"],"backgroundTag":"missing-required-prop","analyzedSha":"eea57cf46fd6767ed1059012f7073b88eb159fba","analyzedAt":"2026-08-28T19:22:46.163Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}