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
<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 faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback