v3.6.14
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
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>
Go back
Highlight – @mantine/core
Up next
Mark – @mantine/core
Build fully functional accessible web applications faster than ever
Project
Contribute to MantineMedia assetsChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGitHub discussions
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
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter