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 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 { CircleCheck, CircleDashed } from 'tabler-icons-react';
function Demo() {
return (
<List
spacing="xs"
size="sm"
center
icon={
<ThemeIcon color="teal" size={24} radius="xl">
<CircleCheck 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">
<CircleDashed 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:

  • First order item
  • 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>
);
}