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
<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 { IssueClosedIcon, IssueDraftIcon } from '@primer/octicons-react';
function Demo() {
return (
<List
spacing="xs"
size="sm"
center
icon={
<ThemeIcon color="teal" size={24} radius="xl">
<IssueClosedIcon size={12} />
</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">
<IssueDraftIcon size={12} />
</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
<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>
Build fully functional accessible web applications with ease