There is contradiction between the installed package and the imported one in the example

[alamenai]

Documentation

Relevant Radix Component(s)

Link: https://www.radix-ui.com/primitives/docs/utilities/visually-hidden

Comopnent: Visually Hidden

In the installation step, we have to install this package:

npm install @radix-ui/react-visually-hidden

notice that we have @

However in the provided example:

import { VisuallyHidden } from "radix-ui";

export default () => <VisuallyHidden.Root />;

[kotAPI]

This applies for every primitive i suppose - I've noticed this for other components as well, seems like they're updating package imports?

[allan-bonadio]

Yeah, I've noticed the same thing. And I've wasted hours trying to figure out why, doing the exact same thing as the example, leads to a syntax error. I was on the verge of tossing radix-ui, saying to myself, oh this is another old, broken npmJS package. Given the example here: liar doc I should use import { DropdownMenu } from "radix-ui"; but that gives an error. Because it's wrong. I've noticed the same wrong import example all over your documentation, for other components. Finally, somewhere, I found that this works: import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

< pissysoapbox > I don't want some BS along the lines of "this is user error (therefore we're moving it to the lowest priority of bugs, therefore not going to fix it)" because I followed dozens of examples in your docs that all give the same lie, instead the one example that works, that's buried so deep in, that I can't even find it again. THE DOCS ARE PART OF THE CODE and if the docs are wrong, it's a bug. When you change the code, you change the docs to match. Just like the unit tests.

Also, saying "the user is a programmer, they can figure it out" is really inconsiderate. A thousand users have to debug your bug, instead of you fixing it once. 😅 < /pissysoapbox >