---
name: List
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import List from './List'
import { livePreviewStyle } from '../helpers/constants'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# List

A simple unordered list component with features to help organize list data and list nesting.

## Basic usage

- The `List` component has `List.Item` and `List.ItemHeader` sub-components, used to render the individual list items and their headers.
- You can pass the `dividers` prop to `List` if you want the list items to be separated by a line.
- If you need to customize the DOM element rendered for the item header, you may use the `as` prop on `List.ItemHeader`.
- You can pass any icon name from our icon library to a `List.Item` or `List.ItemHeader` to render an icon with the content.
- Nested lists should always be rendered as a child of `List.Item`, and they will be indented by 24px for each level of nesting.

### Try It out

export const code = `
<List>
  <List.Item>
    <List.ItemHeader icon="DescriptiveFolder">No Nesting</List.ItemHeader>
    Non-indented
  </List.Item>
  <List.Item>
    This item contains a nested list
    <List>
      <List.Item>
        <List.ItemHeader icon="DescriptiveFolder">Nested List Item</List.ItemHeader>
        Indented 24px
      </List.Item>
      <List.Item>
        <List.ItemHeader icon="DescriptiveFolder">Nested List Item</List.ItemHeader>
        Indented 24px
      </List.Item>
    </List>
  </List.Item>
</List>
`

<LiveProvider code={code} scope={{ List }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Properties

### List

<PropsTable of={List} />

### List.Item

<PropsTable of={List} staticProp="List.Item" />

### List.ItemHeader

<PropsTable of={List} staticProp="List.ItemHeader" />