List

Display ordered or unordered list

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Clone or download repository from GitHub
Install dependencies with yarn
To start development server run npm start command
Run tests to make sure your changes do not break the build
Submit a pull request once you are done

Type

Unordered

Ordered

Size

With padding

import { List } from '@mantine/core';

function Demo() {
  return (
    <List>
      <List.Item>Clone or download repository from GitHub</List.Item>
      <List.Item>Install dependencies with yarn</List.Item>
      <List.Item>To start development server run npm start command</List.Item>
      <List.Item>Run tests to make sure your changes do not break the build</List.Item>
      <List.Item>Submit a pull request once you are done</List.Item>
    </List>
  );
}

With icons

You can replace list bullets with icon. To do so provide following props:

icon on List component will be used as default icon for all list elements
icon on List.Item component will override context icon from List
spacing – spacing between list items from theme or number to set spacing in px, defaults to 0
center – center item content with icon
size – set font size from theme

Clone or download repository from GitHub
Install dependencies with yarn
To start development server run npm start command
Run tests to make sure your changes do not break the build
Submit a pull request once you are done

import { List, ThemeIcon } from '@mantine/core';
import { IconCircleCheck, IconCircleDashed } from '@tabler/icons';

function Demo() {
  return (
    <List
      spacing="xs"
      size="sm"
      center
      icon={
        <ThemeIcon color="teal" size={24} radius="xl">
          <IconCircleCheck size={16} />
        </ThemeIcon>
      }
    >
      <List.Item>Clone or download repository from GitHub</List.Item>
      <List.Item>Install dependencies with yarn</List.Item>
      <List.Item>To start development server run npm start command</List.Item>
      <List.Item>Run tests to make sure your changes do not break the build</List.Item>
      <List.Item
        icon={
          <ThemeIcon color="blue" size={24} radius="xl">
            <IconCircleDashed size={16} />
          </ThemeIcon>
        }
      >
        Submit a pull request once you are done
      </List.Item>
    </List>
  );
}

Nested lists

Set withPadding prop to offset nested lists and listStyleType to control bullet type:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
First order item
First order item with list
- Nested item
- Nested item
- Nested item with list
  Event more nested
  Event more nested
- Nested item
First order item

import { List } from '@mantine/core';

function Demo() {
  return (
    <List listStyleType="disc">
      <List.Item>First order item</List.Item>
      <List.Item>First order item</List.Item>
      <List.Item>
        First order item with list
        <List withPadding listStyleType="disc">
          <List.Item>Nested item</List.Item>
          <List.Item>Nested item</List.Item>
          <List.Item>
            Nested item with list
            <List withPadding listStyleType="disc">
              <List.Item>Event more nested</List.Item>
              <List.Item>Event more nested</List.Item>
            </List>
          </List.Item>
          <List.Item>Nested item</List.Item>
        </List>
      </List.Item>
      <List.Item>First order item</List.Item>
    </List>
  );
}

Go back

Highlight – @mantine/core

Up next

Mark – @mantine/core

List component props

Name	Type	Description
center	boolean	Center items with icon
children^*	ReactNode	<List.Item /> components only
icon	ReactNode	Icon that should replace list item dot
listStyleType	ListStyleType	List style
size	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Font size from theme or number to set value in px
spacing	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Spacing between items from theme or number to set value in px
type	"ordered" \| "unordered"	List type: ol or ul
withPadding	boolean	Include padding-left to offset list from main content

List.Item component props

Name	Type	Description
children^*	ReactNode	Item content
icon	ReactNode	Icon to replace bullet

List component Styles API

Name	Static selector	Description
root	.mantine-List-root	Root element (ul or ol)
item	.mantine-List-item	List element (li)
withIcon	.mantine-List-withIcon	List element with custom icon modifier
itemWrapper	.mantine-List-itemWrapper	Wraps icon and item item content, used to align custom icon with content
itemIcon	.mantine-List-itemIcon	Icon wrapper element

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter