v2.5.1
Discord
Source code

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
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
Project
Contribute to MantineChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGithub discussions
Built by Vitaly Rtishchev and these awesome people