From 2b41c9a640d339f2388297e40b8839042138dd9f Mon Sep 17 00:00:00 2001
From: Andy Le <andy.le@ucdenver.edu>
Date: Tue, 12 Mar 2024 07:13:46 -0600
Subject: [PATCH] [material-ui][docs] Add docs for complementary List
 components (#41329)

---
 docs/data/material/components/lists/lists.md | 22 +++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/docs/data/material/components/lists/lists.md b/docs/data/material/components/lists/lists.md
index 8267257ea2e234..61915c91e3168c 100644
--- a/docs/data/material/components/lists/lists.md
+++ b/docs/data/material/components/lists/lists.md
@@ -14,7 +14,20 @@ Lists are a continuous group of text or images. They are composed of items conta
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
-## Basic List
+## Introduction
+
+Lists present information in a concise, easy-to-follow format through a continuous, vertical index of text or images.
+
+Material UI Lists are implemented using a collection of related components:
+
+- List: a wrapper for list items. Renders as a `<ul>` by default.
+- List Item: a common list item. Renders as an `<li>` by default.
+- List Item Button: an action element to be used inside a list item.
+- List Item Icon: an icon to be used inside of a list item.
+- List Item Avatar: an avatar to be used inside of a list item.
+- List Item Text: a container inside a list item, used to display text content.
+- List Divider: a separator between list items.
+- List Subheader: a label for a nested list.
 
 {{"demo": "BasicList.js", "bg": true}}
 
@@ -28,6 +41,13 @@ The last item of the previous demo shows how you can render a link:
 
 You can find a [demo with React Router following this section](/material-ui/integrations/routing/#list) of the documentation.
 
+## Basics
+
+```jsx
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+```
+
 ## Nested List
 
 {{"demo": "NestedList.js", "bg": true}}