[material-ui][docs] Improve TabContext, TabList, and TabPanel documen…

…tation (mui#40587)
sai6855 · Jan 17, 2024 · 23a9e24 · 23a9e24
1 parent ac5a1e0
commit 23a9e24
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md
@@ -16,16 +16,30 @@ Tabs organize and allow navigation between groups of content that are related an
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
-## Basic tabs
+## Introduction
 
-A basic example with tab panels.
+Tabs are implemented using a collection of related components:
+
+- `<Tab />` - the tab element itself. Clicking on a tab displays its corresponding panel.
+- `<Tabs />` - the container that houses the tabs. Responsible for handling focus and keyboard navigation between tabs.
 
 {{"demo": "BasicTabs.js"}}
 
+## Basics
+
+```jsx
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+```
+
 ## Experimental API
 
 `@mui/lab` offers utility components that inject props to implement accessible tabs
-following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/):
+
+- `<TabList />` - the container that houses the tabs. Responsible for handling focus and keyboard navigation between tabs.
+- `<TabPanel />` - the card that hosts the content associated with a tab.
+- `<TabContext />` - the top-level component that wraps the Tab List and Tab Panel components.
 
 {{"demo": "LabTabs.js"}}