ALT A screenshot of a section of the page linked in the tweet. The section has the title "Nesting children".

ALT The following code: export default function Example() { const [open, setOpen] = useState(false); return ( <> <Button onClick={() => setOpen(true)}>Open dialog</Button> <Dialog open={open} onClose={() => setOpen(false)}> <DialogHeading>Dialog</DialogHeading> <Menu> <MenuButton>Menu</MenuButton> <MenuPopover> <MenuItem>Item</MenuItem> <MenuItem>Item</MenuItem> <MenuItem>Item</MenuItem> <MenuItem>Item</MenuItem> </MenuPopover> </Menu> </Dialog> </> ); }

ALT A screenshot of a documentation section with the following text: Using React Context When you need to access the store in child components, passing it as a prop is usually the most straightforward approach. However, if the component is deeply nested within the component tree or if you're unable to pass the store as a prop for some reason, you can leverage React Context instead: import * as React from "react"; import * as Ariakit from "@ariakit/react"; import invariant from "tiny-invariant"; const FormContext = React.createContext(null); function Form({ children }) { const form = Ariakit.useFormStore({ defaultValues: { name: "" }, }); return ( <FormContext.Provider value={form}> <Ariakit.Form store={form}>{children}</Ariakit.Form> </FormContext.Provider> ); } function NameInput() { const form = React.useContext(FormContext); invariant(form, "NameInput should be wrapped in a Form component"); return <Ariakit.FormInput name={form.names.name} />; }

ALT There's a web form with the title "Preferences". The form has a radio group with the label "Favorite color" and three options: Red, Green, and Blue. No options are selected. Right below the radio group label there's an error message in red with the text "Please select a color.". At the bottom, there's a blue button with the label "Submit".