[docs] documentation for tabs is either out of date, or the tabs themselves are bugged

[Spade-and-Archer]

Duplicates

• [X] I have searched the existing issues

Related page

https://mui.com/material-ui/react-tabs/

Kind of issue

Broken demonstration

Issue description

I have been using tabs in my project and cannot fathom how the first tab example is supposed to work without a TabContext

What I gather from reading the docs is that the TabContext is optional, and can be used if you want to use the "Experimental API" as that is the only example in which a TabContext is present. From attempting to implement this it appears the TabContext is not optional, as attempting to use tabs without a TabContext produces an error that advises me to use a TabContext. I can't be sure whether this is a bug in MUI, or an issue with the documentation, but I am leaning towards an issue with the documentation. If I am not understanding the documentation correctly, or if there is a way to use tabs without the TabContext, then the steps to do so should be made more clear.

Context 🔦

No response

[thorn0]

Check from where you import things. You seem to be using stuff from @mui/lab.

[Spade-and-Archer]

Check from where you import things. You seem to be using stuff from @mui/lab.

Thanks, I just checked this and realized that while I had imported Tab and Tabs from @mui/material, I had imported TabPanel from @mui/lab because it isn't a @mui/material component. In the documentation demo a separate component that is also called TabPanel is defined, which is not the same as the TabPanel from @mui/lab.

I recognize that this is an oversight on my part, but it seems very confusing to have two components with the same name: one defined in the local scope of a demo, and the other defined in a core library. Maybe it would make sense to call the TabPanel that gets defined in the local scope of the demo as CustomTabPanel or TabPane or something else so that it doesn't confuse the auto-import when it gets copied into an IDE?

P.S. I want to add that this is the third or fourth time that I have tried to use the Tab component. Each time: I read the documentation, encountered the same issue, struggled to solve it, and eventually gave up and used a TabContext. I figured that it was probably worth it at this point to leave feedback.

[mnajdova]

Thanks for the feedback. We could add a callout above the experimental demo it make it clear that it is a different package (and components).

[MUK-Dev]

Hello, I am new to contributing. Can I work on this? I can change the name of the TabPanel in the local scope to CustomTabPanel or add a comment specifying that this is not a Core Library Component.