List

Display ordered or unordered list
Import

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
Size
xs
sm
md
lg
xl
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 any valid CSS value to set spacing, 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-react';
function Demo() {
return (
<List
spacing="xs"
size="sm"
center
icon={
<ThemeIcon color="teal" size={24} radius="xl">
<IconCircleCheck size="1rem" />
</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="1rem" />
</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>
);
}

List component props

NameTypeDescription
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
spacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Spacing between items from theme or number to set value
type
"ordered" | "unordered"
List type: ol or ul
withPadding
boolean
Include padding-left to offset list from main content

List.Item component props

NameTypeDescription
children *
ReactNode
Item content
icon
ReactNode
Icon to replace bullet

List component Styles API

NameStatic selectorDescription
root.mantine-List-rootRoot element (ul or ol)
item.mantine-List-itemList element (li)
itemWrapper.mantine-List-itemWrapperWraps icon and item item content, used to align custom icon with content
itemIcon.mantine-List-itemIconIcon wrapper element